我在使用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.
另外,我还有两个问题:
这是由于CORS的原因,因为VueJS运行的域与Mercure安装的域不同。
我使用Docker compose使用Mercure,但如果您从CLI启动它,请尝试添加
--cors-allowed-origins='http://localhost:8000 http://localhost:8080'
其他问题1:我认为您应该在.env和mercure配置中使用相同的密钥
.env
中:MERCURE_JWT_SECRET="Secret123"
--jwt-key='Secret123'