Mercure with symfony not working with vue

Question

I got a problem with configure mercure under symfony with vue. I'm using mercure hub which is attached in symfony cli. in .env file I changed mercure urls to using http because it caused me error with certificate(which was included 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 test it by opening symfony app in example http://localhost:8000 and adding this script in console:

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

It is working and I can publish some changes in other tab. BUT when I do the same but in my vue app which is located on http://localhost:8080 address it shows me in console 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 got 2 more questions:

Why when I paste jwt token in env I got 401 errors but with this one above not?
Why I cant use symfony serve with https? I got errors with "TransportException: fopen(): Unable to locate certificate CN"

Victor Weiss Victor Weiss · Accepted Answer · 2021-07-28T10:54:09

It's because of CORS, because the domain where VueJS is running is different from the one where Mercure is installed.
I use Mercure with Docker compose, but if you start it from the CLI, try adding --cors-allowed-origins='http://localhost:8000 http://localhost:8080'

Other Question 1 : I think, you should use the same secret in .env, and in mercure config

in .env : MERCURE_JWT_SECRET="Secret123"
when you start mercure : --jwt-key='Secret123'

Mercure with symfony not working with vue

1 Answers