I have an API that I access from another port from a JavaScript app. I setup CORS with corsica and everything was working fine.

Recently I try to add CSRF protection and I added the x-csrf-token header (into the JS Fetch API options, see below) and added the :protect_from_forgery plug.

{
  credentials: 'include',
  headers: new Headers({ 'x-csrf-token': csrf })
}

The CSRF token is correct because if I omit it from the request header, I will have a CSRF error.

However, now I have a CORS error:

Access to fetch at ‘http://myapp.localhost:4000/api’ from origin ‘http://myapp.localhost:5000’ has been blocked by CORS policy: Response to preflight request doesn’t pass access control check: No ‘Access-Control-Allow-Origin’ header is present on the requested resource. If an opaque response serves your needs, set the request’s mode to ‘no-cors’ to fetch the resource with CORS disabled.

When I remove the CSRF plug and CSRF request header (‘x-csrf-token’), I get the responses (CORS is correctly setup).

Any idea why CSRF setup is interfering with the CORS setup?