"There are compatibility issues between Mercure, Symfony and Vue"

Question

I have a problem configuring mercure using vue and symfony. I'm using mercure hub attached in symfony cli. In the .env file I changed the url for mercure to use http as this would cause certificate errors (provided by symfony).

.env

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

When I open the symfony application in the browser (e.g. http://localhost:8000) and add the following script in the console for testing:

const eventSource = new EventSource('http://localhost:8000/.well-known/mercure?topic=' encodeURIComponent('http://example .com/books/1'));
eventSource.onmessage = event => {
    // This function will be called every time the server publishes an update
    console.log(JSON.parse(event.data));
}

It works and I can post some changes in other tabs. However, when I do the same in my vue application located at http://localhost:8080, the console shows the following error:

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.

Also, I have two more questions:

1. Why do I get a 401 error when I paste the jwt token into the env, but not when using the above jwt token?
2. Why can't I use symfony serve with https? I encountered "TransportException: fopen(): Unable to locate certificate CN" error.

Answer 1

This is due to CORS, as VueJS is running on a different domain than the one Mercure is installed on.
I'm using Mercure with Docker compose, but if you launch it from the CLI, try adding --cors-allowed-origins='http://localhost:8000 http://localhost:8080'

Additional Question 1: I think you should use the same key in .env and mercure configuration

• In .env: MERCURE_JWT_SECRET="Secret123"
• When starting mercure: --jwt-key='Secret123'