"Mercure、Symfony和Vue之間存在相容性問題"

Question

我在使用vue和symfony配置mercure時遇到了​​問題。我正在使用附加在symfony cli中的mercure hub。在.env檔案中，我將mercure的url更改為使用http，因為這會導致憑證錯誤（由symfony提供）。

.env

MERCURE_URL=http://localhost:8000/.well-known/mercure
MERCURE_PUBLIC_URL=http://localhost:8000/.well-known/mercure
MERCURE_JWT_SECRET="!ChangeMe!"

當我在瀏覽器中開啟symfony應用程式（例如http://localhost:8000），並在控制台中加入以下腳本進行測試：

const eventSource = new EventSource('http://localhost:8000/.well-known/mercure?topic=' encodeURIComponent('http://example .com/books/1'));
eventSource.onmessage = event => {
    // 每次伺服器發布更新時都會呼叫此函數
    console.log(JSON.parse(event.data));
}

它可以工作，我可以在其他選項卡中發布一些更改。 但是，當我在位於http://localhost:8080的vue應用程式中執行相同操作時，控制台會顯示以下錯誤：

Access to resource at 'http://localhost:8000/.well-known/mercure?topic=http://example.com/books/1 ' from origin 'http://localhost:8080' has been blocked by CORS policy: No 'Access-Control-Allow-Origin' header is present on the requested resource.

另外，我還有兩個問題：

1. 為什麼當我將jwt令牌貼到env中時，會出現401錯誤，但使用上述jwt令牌時卻沒有？
2. 為什麼我無法使用https來使用symfony serve？我遇到了“TransportException: fopen(): Unable to locate certificate CN”錯誤。

Answer 1

這是由於CORS的原因，因為VueJS運行的域與Mercure安裝的域不同。
我使用Docker compose使用Mercure，但如果您從CLI啟動它，請嘗試添加--cors-allowed-origins='http://localhost:8000 http://localhost:8080'

#其他問題1：我認為您應該在.env和mercure配置中使用相同的金鑰

• 在.env中：MERCURE_JWT_SECRET="Secret123"
• #啟動mercure時：--jwt-key='Secret123'

#