I added Corsica to my endpoint.ex, but I am still getting a Access-Control-Allow-Origin error

Phoenix Forum Questions / Help
,
1

So I added the Corsica plug before my router in my endpoint.ex file:

  plug Corsica, origins: "*"
  plug RealtimeWeb.Router

Now my frontend is a Reactjs app using axios for API/network calls. It performs an OPTIONS request before the POST request.

Anyhow, on my reactjs login page when I submit it sends a POST request to my Phoenix app.
I am seeing this in my console.log as an error:

http://www.example.com:4000/api/sessions (phoenix app)
http://app.example.com:3000 (reactjs app)

Access to XMLHttpRequest at ‘http://www.example.com:4000/api/sessions’ from origin ‘http://app.example.com:3000’ 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.

I’m scratching my head here for a while and I can’t understand what the issue could be.

Since I set the value of origins to *, it should response with * for access-control-allow-origin it seems as per: corsica/lib/corsica.ex at main · whatyouhide/corsica · GitHub

2

I’m on mobile right now but maybe you can try adding the allow_headers: :all option after the origins

4 Likes