This is a continuation of a discussion that started in this post: How to call webhook triggered flow from frontend (avoid CORS errors)
When you send a request to n8n directly from a frontend inside a browser you get CORS issues unless you are requesting from the same domain.
This is not technically an issue with n8n, but instead this is a security “feature” that browsers have to protect users.
However, since we’re not able to set what we need in n8n to deal with this currently it would be nice to add this as a feature or guide for users that want to blend n8n with traditional coded frontends
The basic solution is to just use a proxy, but this can be impractical / not ideal for a couple of reasons:
- You happen to be using a statically generated frontend site from a framework like Nuxt.js / Next.js so you can’t proxy directly using a framework like Axios
- You don’t want to pay extra for a server just to proxy requests to avoid CORS
- You’re using some no-code frontend builder where it could be complicated to deal with a situation like this
Here’s some background on what we need to fix this issue
the server needs to send the
Access-Control-Allow-Originresponse header because requests trigger a CORS preflight, and so then the browser does an
**The solution is to configure the
server to send theAccess-Control-Allow-Origin
response header** and to handle theOPTIONS` request