"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'