Cors error won't let me connect frontend server to backend server

Questions / Help
1

I am trying to get a front end spun up locally to work on and I have Corsica plug in the endpoint.ex and seems to be configured correctly. I’ve made sure that my env file in my front end .env is pointing at the right local backend server url and now I can’t figure out what else to do to get this working:

This is the error in the console:

Access to fetch at 'https://gimli.podium.com/api/fetch-users' from origin 'http://localhost: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. If an opaque response serves your needs, set the request's mode to 'no-cors' to fetch the resource with CORS disabled.

Then this is what shows on the screen but I suspect it will go away if I fix the cors error. I’ve seen some other people with Cors questions but the answers all seem a little different so I’m not sure what else to do to troubleshoot. Any ideas? Thanks!

Screen Shot 2022-01-26 at 4.58.15 PM
Screen Shot 2022-01-26 at 4.58.15 PM1027×375 39.5 KB

2

For dev purposes, just install any of the CORS bypassing browser plug ins and be done with it.
For production purposes, you need to set the correct cors headers from the backend server.

I have:

  def preflight(conn, _) do
    conn
    |> put_resp_header("cache-control", "public, max-age=86400")
    |> put_resp_header("access-control-allow-methods", "POST, GET")
    |> put_resp_header("access-control-allow-headers", "Accept, Content-Type")
    |> put_resp_header("access-control-max-age", "86400")
    |> send_resp(:no_content, "")
  end

defp permit_cors(conn, _opts) do
     put_resp_header(conn, "access-control-allow-origin", @frontend_server)
end
1 Like
3

Hi @derek-zhou, I tried several different chrome plugins but the error is still throwing. Any extensions you recommend or would you know why they’re not handling the error? Thanks!

4

I have only use this in chrome. As for your error, you have to debug yourself.

The MDN article on CORS has all the details you need; please read it carefully. Check your browser’s debug tool in the network tab and compare the transcript with the one provided in the above article. You will figure it out.

5

Or he can use CorsPlug — cors_plug v2.0.3? :man_shrugging:

3 Likes
6

I didn’t know there is such a package. However, the control freak in me would rather write the 10 lines of code and retain the finer control.

1 Like
7

I sympathize with that point of view but long-term it adds up. You hand-roll A, then B, then C, and by the time you’re at Z or something you’re already like “gods, this project contains too much hand-rolled things!”.

I am quite paranoid about that and very conscious about preventing tech debt (to the detriment of my immediate productivity at times) so I could be looking at this the wrong way but it’s how I roll. If I incorporate a library and it seems to do the job I’ll just use that forever.

2 Likes
8

In my point of view, tech debt is something that you did not pay (with work) and may cause issues down the road. So in this sense, write the code, roll your own is more work and less tech debt. There is nothing wrong with it; it is just a different trade-off.

1 Like