Node-RED template node + Traefik CORS problem

General
1

I am trying to load fonts from a subdomain different from the Node-RED subdomain in a template node, but this fails with this error:

Access to font at 'https://www.mydomain.tld/path/to/font.woff2' from origin 'https://node-red.mydomain.tld' has been blocked by CORS policy: No 'Access-Control-Allow-Origin' header is present on the requested resource.

I am running Node-RED from the official Docker image behind Traefik as a reverse proxy.

I tried to enable the CORS settings in settings.js like this:

httpNodeCors: {
    origin: "*",
    methods: "GET,PUT,POST,DELETE"
}

This did not help.

I also tried to put the following labels into my docker-compose.yml for Traefik:

- traefik.http.middlewares.cors.headers.accesscontrolalloworiginlist=*
- traefik.http.middlewares.cors.headers.accessControlAllowHeaders=*
- traefik.http.middlewares.cors.headers.accesscontrolallowmethods=GET,OPTIONS,PUT

And in my docker-compose.yml for Node_RED:

- traefik.http.routers.nodered.middlewares=cors

No success. What would be a functioning solution?

2

CORS is set by the endpoint server not the requester

In this case here, you are requesting from your browser to a traefik server

In simple terms, the issue is not with node-red but with the endpoint serving the data/resource/font - which in this case is traefik.

Search the net for "traefik CORS" - there are lots of threads, or head to the traefik forums.

3

In case anyone else has this problem: Of course, it was an error on my part. Not Node-RED has to submit the relevant headers, but the other service (in my case a dockerized Apache webserver). Normally you do not need to change your Traefik configuration. I added this to the docker-compose.yml of my Apache container:

labels:
    # CORS for Node-RED
    - "traefik.http.routers.webserver-https.middlewares=cors"
    - "traefik.http.middlewares.cors.headers.accesscontrolallowmethods=GET,OPTIONS,POST"
    - "traefik.http.middlewares.cors.headers.accesscontrolmaxage=100"
    - "traefik.http.middlewares.cors.headers.addvaryheader=true"
    - "traefik.http.middlewares.cors.headers.accessControlAllowOriginList=https://node-red.mydomain.tld"

If you do not want to explicitely name the domains, you can use a wildcard. But for whatever reason, this line did NOT work for me:

- "traefik.http.middlewares.cors.headers.accessControlAllowOriginList=*"

But kind of a dirty trick did work:

- "traefik.http.middlewares.cors.headers.accessControlAllowOriginListRegex=(.*?)"