CORS error while hit the n8n rest api from my own frontend

[Johnson_F]

I’m running a self-hosted instance of n8n using Docker and exposing it via ngrok. When trying to access the n8n REST API from my Next.js frontend, I’m encountering a CORS error: “No ‘Access-Control-Allow-Origin’ header is present on the requested resource.” I couldn’t find an environment variable in the docs to enable or configure CORS for the n8n API. Is there a recommended way to allow cross-origin requests when running n8n in Docker with ngrok? Any guidance or workaround would be appreciated!

instance information

Debug info

core

• n8nVersion: 1.92.2
• platform: docker (self-hosted)
• nodeJsVersion: 20.19.0
• database: sqlite
• executionMode: regular
• concurrency: -1
• license: enterprise (production)
• consumerId: 9c4127e9-94d0-457f-a716-3848f0ac12fe

storage

• success: all
• error: all
• progress: false
• manual: true
• binaryMode: filesystem

pruning

• enabled: true
• maxAge: 336 hours
• maxCount: 10000 executions

client

• userAgent: mozilla/5.0 (windows nt 10.0; win64; x64) applewebkit/537.36 (khtml, like gecko) chrome/136.0.0.0 safari/537.36
• isTouchDevice: false

Generated at: 2025-05-23T12:47:18.259Z

[King_Samuel_David]

Nice, thanks for providing debug details, not many people know about it

The CORS (Cross-Origin Resource Sharing) issue you are facing is due to the fact that the Access-Control-Allow-Origin header is either missing or incorrectly configured in your webhook response.

In your n8n .env file or when running n8n, make sure you set:

N8N_DEFAULT_CORS=TRUE
N8N_CORS_ALLOW_ORIGIN=https://mywebsite.co.uk
Be sure to restart n8n.

If you are using NGINX as a reverse proxy, you can configure it to add CORS headers:

location /webhook/ {
proxy_pass http://localhost:5678;
add_header ‘Access-Control-Allow-Origin’ ‘https://mywebsite.co.uk’ always;
add_header ‘Access-Control-Allow-Methods’ ‘GET, POST, OPTIONS’ always;
add_header ‘Access-Control-Allow-Headers’ ‘Content-Type’ always;
}
Then reload NGINX. see referenced post below:
Allowed Origins (CORS) error

Hope this helps

[Johnson_F]

thanks, I’m running n8n on docker, so need to add these env variables while create container right?

[Johnson_F]

@King_Samuel_David In docker, I’ve added the below envs while run a n8n container. but still same cors error occured while call the n8n create workflow api from my own frontend next js code.

N8N_COMMUNITY_PACKAGE_ALLOW_TOOL_USAGE=true
N8N_EDITOR_BASE_URL=https://light-actually-whippet.ngrok-free.app
WEBHOOK_URL=https://light-actually-whippet.ngrok-free.app
WEBHOOK_TUNNEL_URL=https://light-actually-whippet.ngrok-free.app
N8N_DEFAULT_BINARY_DATA_MODE=filesystem
N8N_DEFAULT_CORS=true
N8N_CORS_ALLOW_ORIGIN=https://martha-images-african-goals.trycloudflare.com

[Wouter_Nigrini]

These vars will set the cors globally for your n8n instance. You can also try setting this option on the webhook node:

Try * first to allow all and then play with your specific domain if you want to lock it down a bit