mercure docker cannot configure properly problem with CORS

Question

I try for a bunch of hours to configure my mercure with docker I didn't manage to solve the corss issue :

has been blocked by CORS policy: No 'Access-Control-Allow-Origin' header is present on the requested resource

I have this docker-compose file

extract

  mercure:
    image : dunglas/mercure
    volumes:
      - ./mercure/caddy:/etc/caddy
    ports:
      - "8081:80"
      - "443:443"
    environment:
      - SERVER_NAME=localhost
      - MERCURE_SUBSCRIBER_JWT_KEY=changeIt
      - MERCURE_PUBLISHER_JWT_KEY=changeIt
      - MERCURE_CORS_ALLOWED_ORIGINS=*
      - ALLOW_ANONYMOUS=1

And this Caddyfile :

# The address of your server
localhost

:80
route {
    mercure {
        # Publisher JWT key
        publisher_jwt changeIt
        # Subscriber JWT key
        subscriber_jwt changeIt
        cors_origins http://localhost:3000
    }

    respond "Not Found" 404
}

my request on client side is in React

http.get('/api/mercure').then( response => {
            this.setCookie( response.data.token);
            const url = new URL('http://localhost:8081/.well-known/mercure');
            url.searchParams.append('topic', 'http://agora.org/votes/{id}');
            const eventSource = new EventSource(url, {withCredentials: true});
            eventSource.onmessage = (data) => {
                console.log(data);
            }
        },error => {
            console.log( error);
        })

Can someone help me out of this ? Thx in advance

Answer 1

I have successfully used the Mercure with docker-compose without the CORS issue. You can find the implementation here.

As I have reached here, someone else may also reach here as well and may help that person too.