Add ability to set CORS allow-list in n8n webhooks

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:

  1. 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
  2. You don’t want to pay extra for a server just to proxy requests to avoid CORS
  3. 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-Origin response header because requests trigger a CORS preflight, and so then the browser does an OPTIONS preflight.

**The solution is to configure the server to send the Access-Control-Allow-Originresponse header** and to handle theOPTIONS` request