Docker + Traefik, need help configuring for CORS

Questions
1

Continuing the discussion from HTTP Request not returning result with nginx proxy in front:

I’m looking for an example of a Traefik configuration that sends the proper access-control-allow-origin header to fix my CORS issues.

Describe the issue/error/question

I’ve configured a basic dockerised deployment, using this docker-compose file based on the Server Setup Tutorial:

version: "3"

services:
  traefik:
    image: "traefik"
    restart: always
    command:
      - "--api=true"
      - "--api.insecure=true"
      - "--providers.docker=true"
      - "--providers.docker.exposedbydefault=false"
      - "--entrypoints.web.address=:80"
      - "--entrypoints.web.http.redirections.entryPoint.to=websecure"
      - "--entrypoints.web.http.redirections.entrypoint.scheme=https"
      - "--entrypoints.websecure.address=:443"
      - "--certificatesresolvers.mytlschallenge.acme.tlschallenge=true"
      - "--certificatesresolvers.mytlschallenge.acme.email=${SSL_EMAIL}"
      - "--certificatesresolvers.mytlschallenge.acme.storage=/letsencrypt/acme.json"
    ports:
      - "80:80"
      - "443:443"
    volumes:
      - ${DATA_FOLDER}/letsencrypt:/letsencrypt
      - /var/run/docker.sock:/var/run/docker.sock:ro

  n8n:
    image: n8nio/n8n
    restart: always
    ports:
      - "127.0.0.1:5678:5678"
    labels:
      - traefik.enable=true
      - traefik.http.routers.n8n.rule=Host(`${SUBDOMAIN}.${DOMAIN_NAME}`)
      - traefik.http.routers.n8n.tls=true
      - traefik.http.routers.n8n.entrypoints=web,websecure
      - traefik.http.routers.n8n.tls.certresolver=mytlschallenge
      - traefik.http.middlewares.n8n.headers.SSLRedirect=true
      - traefik.http.middlewares.n8n.headers.STSSeconds=315360000
      - traefik.http.middlewares.n8n.headers.browserXSSFilter=true
      - traefik.http.middlewares.n8n.headers.contentTypeNosniff=true
      - traefik.http.middlewares.n8n.headers.forceSTSHeader=true
      - traefik.http.middlewares.n8n.headers.SSLHost=${DOMAIN_NAME}
      - traefik.http.middlewares.n8n.headers.STSIncludeSubdomains=true
      - traefik.http.middlewares.n8n.headers.STSPreload=true

    environment:
      - N8N_BASIC_AUTH_ACTIVE=true
      - N8N_BASIC_AUTH_USER
      - N8N_BASIC_AUTH_PASSWORD
      - N8N_HOST=${SUBDOMAIN}.${DOMAIN_NAME}
      - N8N_PORT=5678
      - N8N_PROTOCOL=https
      - NODE_ENV=production
      - WEBHOOK_URL=https://${SUBDOMAIN}.${DOMAIN_NAME}/
      - GENERIC_TIMEZONE=${GENERIC_TIMEZONE}
    volumes:
      - ${DATA_FOLDER}/.n8n:/home/node/.n8n
      - /local-files:/files

What is the error message (if any)?

I am unable to call Webhooks from within the browser. The result is always:

A cross-origin resource sharing (CORS) request was blocked because of invalid or missing response headers of the request or the associated preflight request .

blocked	
Access-Control-Allow-Origin	Missing Header

Please share the workflow

I used this because it was reported to fix the cors issue, but I got the same CORS issue.

Information on your n8n setup

  • n8n 0.165.1
  • Running n8n via Docker using Docker Compose
2

Update:
I tested this webhook using curl:

Note that the

  "name": "access-control-allow-origin",
                "value": "survey123.arcgis.com"

This is because I’m working with a form hosted on that domain which is configured to call the webhook.

When I call the webhook using curl, I get:

< access-control-allow-origin: survey123.arcgis.com
< content-type: application/json; charset=utf-8
< date: Fri, 04 Mar 2022 00:34:03 GMT
< etag: W/"23-oDXMYq3oYYmi7auuVaxD2QFztMg"
< vary: Accept-Encoding
< x-powered-by: Express
< content-length: 35

So, at least with curl, the access-control-allow-origin is being returned.

I’m slightly stumped at the moment, because when I use the form through my browser it reports a missing header:

image
image984×142 19.1 KB

3

Hey @pigeonflight,

Have you checked the CORS section of the Traefik documentation?

It looks like you will need to add an additional label to the compose file and you will be good to go.

When connecting to the n8n instance are you now going through the traefik container or are you going through the old proxy still first?

4

My current setup uses traefik without the old proxy.

5

Perfect in that case the bit from the Traefik docs above should help set the header you are after.

6

There’s clearly a gap in my knowledge here:
Are these literal?

 - "traefik.http.middlewares.testheader.headers.accesscontrolalloworigin=origin-list-or-null"

or do I replace testheader in the label with something else?

When I add those labels to my docker-compose.yml I get this error:

time="2022-03-04T10:58:22Z" level=error msg="field not found, node: accesscontrolalloworigin" providerName=docker container=n8n-root-24c54a05d87c8fb75e7a861eba4e45dc34a4d94f359a1808948a737dfe9f4a84
7

Hey @pigeonflight,

Kind of literal, So those values on their own will set the header for the “testheader” group from there it looks you would normally tell the router to use the testheader middleware.

Looking at the compose example we provide though… You might be able to just add it using traefik.http.middlewares.n8n.headers.

1 Like
8

I was wondering about that…
makes sense.

9

For my very simple use-case I’m reverting to nginx as my proxy as I’ve gotten it to work.
I’ll place notes here: HTTP Request not returning result with nginx proxy in front - #12 by pigeonflight

1 Like