DOMWindow で 'postMessage' の実行に失敗しました

サポート
1

フォーラムでこの問題の解決策を検索し、提示されたいくつかのオプションを試しました。

Digital Ocean Droplet で Ghost パブリケーションを実行しており、別の Digital Ocean Droplet で Discourse フォーラムを実行しています。フォーラムの意見では、同じサーバーに 2 つのアプリケーションをインストールすべきではないとのことでした。

forum.mysite dot com
mysite dot com

Discourse コメントをすべての投稿に表示したいのですが、mysite.com/blog という URL スラッグがありません。そのため、ドキュメントに従って現在のサイト 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 へのすべての参照で同じエラーが発生しています。

フレームがロードされていない可能性を考えて待機関数を追加しましたが、同じエラーが persist しています。

現在の埋め込みコードは次のとおりです。

<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

リリーさん、こんにちは。ゴーストホストのディスコースのインストールが同じであることを再確認するために、私もそのチュートリアルに従いました。

以下のようなURL参照を試しました。

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

何か間違っていますか？

また、同じエラーが発生しましたが、迅速なご対応ありがとうございます。

4

これはよくあるエラーです: Search results for 'Failed to execute 'postMessage' on 'DOMWindow'' - Discourse Meta. 可能性は低いですが、エラーの考えられる原因の 1 つは、Discourse の埋め込み設定ページにある「トピック作成用のユーザー名」設定に記入していないことです。

それは問題にならないはずです。

問題を引き起こす可能性のあることの 1 つは、Discourse サイトがプライベートである場合です: Embed Discourse comments on another website via Javascript.

5

サイモンさん、こんにちは。当初、Discourse管理パネル内でトピック作成のユーザー名が正しく設定されていませんでしたが、パネル内および以下の箇所でJosephPaulに修正しました。
<meta name='discourse-username' content='JosephPaul'>

これらは私の知る限り正しいはずです。

また、あなたが送ってくれた2番目のリンクも確認しましたが、すべて正しいと思います。Discourseサイトのサインイン不要設定を試しましたが、問題は解決しませんでした。

新規作成された投稿でも問題は継続しています。

編集：
上記の投稿で提案されている埋め込みURLの変更点を再度試しました。以下のコードでエラーが再現します。

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);
  })();

サイモンのスレッドに沿った追加のトラブルシューティング：

ユーザーの提案に従い、埋め込みURLにwww.を含めるように設定しました。以下のエラーが発生します。

Referer:`https://josephpaul.com/test-post/`
リファラーが送信されなかったか、以下のいずれかのホストと一致しませんでした。

josephpaul.com
6

サイモン、何かアイデアはありますか？必要であれば、どのような出力やコード例でも提供できます。

7

埋め込みコードがあるブログ投稿へのリンクをPMで送っていただければ、確認します。

問題の原因を絞り込むために、Discourseの埋め込みページにある埋め込みコードを、EMBED_URLをブログページのURLに置き換える以外の変更なしに追加して試していただけると幸いです。

9

サイモンさん、こんにちは。スニペットとライブサイトへのリンクを喜んでお送りします。DiscourseでDMを送るにはどうすればよいですか？おそらく私の信頼レベルが足りないのでしょう。

ドキュメントには、あなたの名前をクリックするとメッセージが表示されるポップアップが表示されると書かれていましたが、私の側では表示されません。

これまでのご協力に改めて感謝いたします。解決策が得られたら、必ず質問を更新します。

10

解決策が見つかりました - @simon と @Lilly の素晴らしいサポートに感謝します。

Simon のアドバイスに従って変更された項目：

チュートリアルのコードを、非推奨の用語を含まないように変更し、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>

さらに、Discourse 管理 > 設定タブにある Discourse サイトのコンテンツセキュリティポリシーの src 設定に https://www.test.com と https://test.com を追加しました。

注意 - 私の経験では、小さなドロップレットでページを速すぎると更新すると、結果が表示されるまで約 30 秒かかる場合があります。そのため、各ゴーストの再起動と Discourse 管理パネルの編集に効果が現れるまでしばらく時間を置いてください。

追加注意 - 記事のコメントセクションを初めて確認する際には、長い遅延が発生します。@simon は、フォーラム投稿に関連付けられたコメントセクションを生成する時間を Discourse に与えるために、常にまず自分で記事を確認することを推奨しています。

改めて、皆さんありがとうございました。非常に役立ちました。私が視聴したチュートリアルの多くの YouTube コメンターが、Discourse/Ghost の統合手順を参照していた私と同じ問題を抱えていました。YouTube のリンクは非推奨になっている可能性があるため、このヘルプは素晴らしかったです。

11

これで動作するようになったとのこと、大変嬉しく思います。:+1: 埋め込みは、セットアップごとに少しずつ異なるため、少々厄介です。あなたの経験を共有してくださり、ありがとうございます。私も学びました。また、@simon は素晴らしく、私が知る中で最も親切で賢く、そして助けになる人物の一人です。そして、彼はDiscourseもかなり得意なのです。:slight_smile: