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

Questions
1

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

1 Like
2

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

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

1 Like
3

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

4

@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

5

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

image
image816×1320 106 KB

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