Не удалось выполнить 'postMessage' в 'DOMWindow'

Поддержка
1

Я искал ответ на эту проблему на форуме и попробовал несколько предложенных вариантов.

Я запускаю публикацию Ghost на Droplet от Digital Ocean, а форум Discourse — на отдельном Droplet от Digital Ocean, так как консенсус на форуме гласит, что не следует устанавливать два приложения на один сервер.

Я хочу, чтобы комментарии Discourse отображались под каждым сообщением, и у меня нет URL-слаг mysite.com/blog. Поэтому я следовал документации, чтобы получить текущий URL сайта и использовать его как URL для встраивания.

Следуя документации здесь: Официальная документация по интеграции

Мне удаётся отобразить фрейм на новых сообщениях. Однако он не загружается и выдаёт следующую ошибку:
Failed to execute 'postMessage' on 'DOMWindow': The target origin provided ('<URL>') does not match the recipient window's origin ('<URL>').

Я подтвердил, что мои настройки HTTPS верны. Мой встроенный URL повторяет учебное пособие, но я попробовал несколько вариантов discourseEmbedUrl в попытке устранить неполадку. Все ссылки на текущий URL статьи вызывают ту же ошибку.

Я также попробовал добавить функцию wait, подумав, что, возможно, фрейм не успел загрузиться, но ошибка остаётся.

Вот мой текущий встроенный код:

<div id='discourse-comments'></div>
<meta name='discourse-username' content='JosephPaul'>

<script type="text/javascript">
  DiscourseEmbed = {
    discourseUrl: 'https://forum.mysite.com/',
    discourseEmbedUrl: '{{url absolute="true"}}',
    // className: 'CLASS_NAME',
  };

  (function() {
    var d = document.createElement('script'); d.type = 'text/javascript'; d.async = true;
    d.src = DiscourseEmbed.discourseUrl + 'javascripts/embed.js';
    (document.getElementsByTagName('head')[0] || document.getElementsByTagName('body')[0]).appendChild(d);
  })();
</script>

Буду признателен за любую помощь, так как я исчерпал все опубликованные решения. Мне кажется, что проблема может быть в том, что мой форум и статьи находятся на разных машинах.

2

Привет, @Joseph3 :wave: добро пожаловать на Discourse Meta :slight_smile:

Вы уже видели эту тему?

3

Привет, Лилли, да, я также следовал этому руководству, чтобы убедиться, что установка Discourse с собственным хостингом идентична.

Я попробовал использовать их ссылку на URL, как указано ниже:

discourseEmbedUrl: 'https://mysite.com<%= current_page.url %>'

Что-то здесь неправильно?

Также это привело к той же ошибке. Спасибо за ваш быстрый ответ.

4

Это довольно распространённая ошибка: Search results for 'Failed to execute 'postMessage' on 'DOMWindow'' - Discourse Meta. Это маловероятно, но одной из возможных причин ошибки может быть незаполненная настройка «Имя пользователя для создания тем», которую можно найти на странице настроек встраивания Discourse.

Это не должно вызывать проблем.

Проблемы могут возникнуть, если ваш сайт Discourse является приватным: Embed Discourse comments on another website via Javascript.

5

Привет, Саймон. У меня изначально была проблема с тем, что имя пользователя для создания тем было указано неверно в панели администратора Discourse. Но я исправил это: теперь имя JosephPaul отображается как в панели, так и в:
<meta name='discourse-username' content='JosephPaul'>

Насколько мне известно, всё верно.

Я также посмотрел вторую ссылку, которую вы прислали, и считаю, что там всё правильно. Я просто попробовал отключить требование входа на свой сайт Discourse, но это не решило проблему.

Проблема сохраняется даже для новых созданных постов.

Редактирование:
Я снова попытался внести некоторые из предложенных изменений в URL для встраивания, упомянутые в сообщении выше. Следующий код вызывает ошибку:

<script type="text/javascript">

setTimeout(5000)
  DiscourseEmbed = {
    discourseUrl: 'https://forum.josephpaul.com/',
    discourseEmbedUrl: 'https://josephpaul.com{{page.url}}' };

  (function() {
    var d = document.createElement('script'); d.type = 'text/javascript'; d.async = true;
    d.src = DiscourseEmbed.discourseUrl + 'javascripts/embed.js';
    (document.getElementsByTagName('head')[0] || document.getElementsByTagName('body')[0]).appendChild(d);
  })();
</script>

Дополнительная попытка устранения неполадок по теме Саймона:

Я установил URL для встраивания так, чтобы он также включал www., как предложил один из пользователей. Теперь возникает следующая ошибка:

Referer: `https://josephpaul.com/test-post/`

Ссылка-источник либо не была отправлена, либо не совпала ни с одним из следующих хостов:

josephpaul.com
6

Есть какие-то идеи по этому поводу, Саймон? Я с радостью предоставлю любые результаты или примеры кода, которые вам понадобятся.

7

Отправьте мне личное сообщение со ссылкой на блог-пост, где у вас есть код встраивания, и я всё проверю.

Чтобы сузить круг возможных причин проблемы, было бы здорово, если бы вы попробовали добавить код встраивания, который находится на вашей странице встраивания Discourse, без каких-либо изменений, кроме замены EMBED_URL на URL страницы блога.

9

Привет, Саймон! Конечно, я с радостью отправлю тебе фрагмент кода, а также ссылку на работающий сайт. Как отправить личное сообщение в Discourse? Возможно, мой уровень доверия ещё недостаточно высок.

В документации написано, что нужно нажать на своё имя, и должно появиться всплывающее окно с сообщением, но у меня этого не происходит.

Ещё раз спасибо за помощь до сих пор! Я обязательно обновлю свой вопрос, как только мы найдём решение.

10

Решение найдено — спасибо @simon и @Lilly за невероятную поддержку.

Изменения, внесённые по совету Саймона:

Обновил код из урока, убрав устаревшие термины и добавив условный оператор if:

<div id='discourse-comments'></div>
<meta name="discourse-username" content="ForumAdminName">

<script type="text/javascript">
  if (window.location.pathname.indexOf('/p/') < 0) {
  DiscourseEmbed = {
    discourseUrl: 'https://forum.test.com/',
    discourseEmbedUrl: '{{url absolute="true"}}',
    // className: 'CLASS_NAME',
  };

  (function() {
    var d = document.createElement('script'); d.type = 'text/javascript'; d.async = true;
    d.src = DiscourseEmbed.discourseUrl + 'javascripts/embed.js';
    (document.getElementsByTagName('head')[0] || document.getElementsByTagName('body')[0]).appendChild(d);
  })();
}
</script>

Кроме того, добавил https://www.test.com и https://test.com в настройку src политики безопасности контента (CSP) сайта Discourse, которая находится в разделе администратора Discourse > вкладка «Настройки».

Примечание — по моему опыту, при частом обновлении страницы на маленьком дроплете результаты могут не отображаться примерно 30 секунд, поэтому давайте каждому перезапуску Ghost и редактированию в панели администратора Discourse немного времени для применения изменений.

Дополнительное примечание — при первом проверке раздела комментариев любой статьи наблюдается значительная задержка. @simon рекомендует всегда сначала проверять статью самостоятельно, чтобы у Discourse было время сгенерировать раздел комментариев, связанный с публикацией на форуме.

Ещё раз спасибо всем, очень помогли. Многие комментаторы на YouTube в видеоуроке, который я смотрел, сталкивались с теми же проблемами, что и я, и ссылались на инструкции по интеграции Discourse и Ghost. Ссылки на YouTube могут быть устаревшими, поэтому эта помощь была очень кстати.

11

Я так рад, что у вас всё заработало. :+1: Внедрение немного сложное, так как для каждой настройки оно не совсем одинаковое. Спасибо, что поделились своим опытом, я многому научился. Также @simon — удивительный человек, один из самых добрых, умных и отзывчивых людей, которых мне довелось знать. К тому же он отлично разбирается в Discourse. :slight_smile: