「Mercure、Symfony、Vue の間に互換性の問題があります。」
P粉023650014
2023-08-26 12:58:16
<p>vue と symfony を使用して Mercure を設定するのに問題があります。私はsymfony cliに接続されたMercureハブを使用しています。 .env ファイルでは、証明書エラーが発生するため、Mercure の URL を http を使用するように変更しました (symfony によって提供されました)。 </p>
<p>.env</strong></p>
<pre class="brush:php;toolbar:false;">MERCURE_URL=http://localhost:8000/.well-known/mercure
MERCURE_PUBLIC_URL=http://localhost:8000/.well-known/mercure
MERCURE_JWT_SECRET="!ChangeMe!"</pre>
<p>ブラウザで symfony アプリケーションを開き (例: http://localhost:8000)、テストのためにコンソールに次のスクリプトを追加します。
<pre class="brush:php;toolbar:false;">consteventSource = new EventSource('http://localhost:8000/.well-known/mercure?topic=' encodeURIComponent('http://example .com/books/1'));
eventSource.onmessage = イベント => {
// この関数はサーバーが更新を公開するたびに呼び出されます
console.log(JSON.parse(event.data));
}</pre>
<p>これは機能し、他のタブに変更を投稿できます。
ただし、http://localhost:8080 にある vue アプリケーションで同じことを実行すると、コンソールに次のエラーが表示されます。
<pre class="brush:php;toolbar:false;">「http://localhost:8000/.well-known/mercure?topic=http://example.com/books/1」のリソースへのアクセス' オリジン 'http://localhost:8080' は CORS ポリシーによってブロックされました: 要求されたリソースには 'Access-Control-Allow-Origin' ヘッダーが存在しません。</pre>
<p>あと 2 つ質問があります:</p>
<ol>
<li>jwt トークンを環境に貼り付けると 401 エラーが発生するのに、上記の jwt トークンを使用すると発生しないのはなぜですか? </li>
<li>https で symfonyserve を使用できないのはなぜですか? 「TransportException: fopen(): 証明書 CN が見つかりません」エラーが発生しました。 </li>
</ol></p>
![[Web フロントエンド] Node.js クイック スタート](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
VueJS は Mercure がインストールされているドメインとは異なるドメインで実行されているため、これは CORS が原因です。
Docker compose で Mercure を使用していますが、CLI から起動する場合は、
--cors-allowed-origins='http://localhost:8000 http://localhost:8080'を追加してみてください。追加の質問 1: .env と Mercure 構成では同じキーを使用する必要があると思います
.env内:MERCURE_JWT_SECRET="Secret123"--jwt-key='Secret123'