Troubleshooting
401 Unauthorized
Double-check that the request to the hub includes an authorization cookie (the default name is
mercureAuthorization
) or anAuthorization
HTTP headerIf the cookie isn't set, you may have to explicitly include the request credentials (
new EventSource(url, {withCredentials: true})
andfetch(url, {credentials: 'include'})
)Check the logs written by the hub on
stderr
, they contain the exact reason why the token has been rejectedBe sure to set a secret key (and not a JWT) in
JWT_KEY
(or inSUBSCRIBER_JWT_KEY
andPUBLISHER_JWT_KEY
)If the secret key contains special characters, be sure to escape them properly, especially if you set the environment variable in a shell, or in a YAML file (Kubernetes...)
The publisher always needs a valid JWT, even if the
anonymous
directive is present in theCaddyfile
, this JWT must have a property namedpublish
. To dispatch private updates, thepublish
property must contain the list of topic selectors this publisher can use (example)The subscriber needs a valid JWT only if the
anonymous
directive isn't present in theCaddyfile
, or to subscribe to private updates, in this case the JWT must have a property namedsubscribe
and containing an array of topic selectors (example)
For both the publish
property, the array can be empty to publish only public updates. For both publish
and subscribe
, you can use ["*"]
to match all topics.
CORS Issues
If the app connecting to the Mercure hub and the hub itself are not served from the same domain, you must whitelist the domain of the app using the CORS (Cross-Origin Resource Sharing) mechanism. The usual symptoms of a CORS misconfiguration are errors about missing CORS HTTP headers in the console of the browser (Refused to connect to 'https://hub.example.com/.well-known/mercure?topic=foo' because it violates the following Content Security Policy directive
with Chrome, Cross-Origin Request Blocked: The Same Origin Policy disallows reading the remote resource at https://hub.example.com/.well-known/mercure?topic=foo. (Reason: CORS header ‘Access-Control-Allow-Origin’ missing)
with Firefox).
To fix these errors, set the list of domains allowed to connect to the hub as value of the cors_origins
in the Caddyfile
. Example: cors_origins https://example.com https://example.net
. Don't forget the https://
prefix before the domain name!
If you use an authorization mechanism (cookie or Authorization
header), you cannot set the value of cors_origins
to *
. You must explicitly set the list of allowed origins.
If you don't use an authorization mechanism (anonymous mode), you can set the value of cors_origins
to *
to allow all applications to connect to the hub (be sure to understand the security implications of what you are doing).
URI Templates and Topics
Try our URI template tester to ensure that the template matches the topic.
Mac OS Localhost Installation Error
How to process for Mercure to work in Mac OS Catalina:
In the Finder on your Mac, locate the app that you want to open
Control-click on the app icon, then choose "Open" from the shortcut menu
Click "Open"
Then you will have a warning, ignore it and close the Terminal.
Open a new Terminal in the Mercure folder.
Then just start the server:
./mercure run
It will work. 🎊