Problem with CORS - request failed, has been blocked by CORS policy

Phoenix Forum Questions / Help
, ,
1

I’m doing requests with Graphql and Apollo Client to a backend project made with Phoenix. I had a problem because the request failed and the Chrome console shows me the error “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 used CORSICA and CORSPlug to allow access but it didn’t work. Please, anyone has an example or solved that error?

Thanks!

2 Likes
2

How did You configure CORS? I had to update my endpoint to make it work (with Corsica).

Something like this…

  plug Corsica,
    origins: [
      "http://localhost:4000",
      "http://localhost:8000",
      "http://localhost:8080"
    ],
    allow_headers: ["accept", "content-type", "authorization"],
    allow_credentials: true,
    log: [rejected: :error, invalid: :warn, accepted: :debug]

Of course your configuration may vary a lot…

3 Likes
3

Have you tried to handle OPTIONS query?

If you need to handle requests from different domain, your server should allow to do it.

Here is an example of nginx.conf

    location / {
        if ($request_method = OPTIONS) {
            add_header Access-Control-Allow-Origin $http_origin;
            add_header Access-Control-Allow-Credentials true;
            add_header Access-Control-Allow-Headers "Authorization, Origin, Content-Type, Accept";
            add_header Access-Control-Allow-Methods "GET, PUT, POST, DELETE, PATCH, OPTIONS";
            add_header Content-Length 0;
            add_header Content-Type text/plain;
            return 200;
        }

        proxy_pass http://backend:4000;
    }
4

I’m going to try that. I didn’t configure the allow Headers, thanks!

I did only that:
plug Corsica, origins: "*", allow_credentials: true

5

Could you pass me another example to add that? This is my first time doing that.

6

Hello, @ArleyR I’d really appreciate it if you could show me how you solved this problem eventually, cause I am in having the same issue right now.

7

i deployed my graphql api on GAE. when try to connect with local create react app on localhost:3000 i keep getting:
Access to fetch at ‘https://MyApi/api’ from origin ‘http://localhost:3000’ has been blocked by CORS policy: 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.

I’d appreciate some help here.

8

Hello @dumadi, your API use Elixir? In my case, I solved that problem using [cors_plug]. I had an umbrella project (as my API), and I put that plug inside the project with the endpoint.

I modified the Router, something like this:

defmodule APIWeb.Router do
  use APIWeb, :router

  pipeline :any_name do
    plug CORSPlug, origin: "*"
    ...
  end

  scope "/" do
    ...
    pipe_through(:any_name)
    ...
  end
end

If you have an API in another language, you need to investigate how to configure the cors.
I used this tutorial for express: https://expressjs.com/en/resources/middleware/cors.html

1 Like
9

@dumadi If you can’t solve that problem, let me know and I’m going to help you :+1:

1 Like
10

I’m having a problem with CORS. Via the browser, I am getting the following error:

Access to XMLHttpRequest at 'http://localhost:4000/api/data' from origin 'http://localhost:4200' 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 currently believe I have my setup similar to the example above:

  pipeline :api do
    plug CORSPlug, origin: "*"
    plug :accepts, ["json"]
    forward "/", Absinthe.Plug, schema: DxAppRcWeb.Schema
  end

I can replicate the same query using GraphiQL and it works - so I know my pipeline is configured correctly when CORS isn’t an issue. Any suggestions for how I should troubleshoot?

Thanks!

11

To answer my own problem, the pipeline that I added the CORS logic to was downstream of Phoenix.Router, meaning it never got called. Moving the plug upstream out of the router.ex file into the endpoint.ex file solved the problem.

12

We don’t know what to add to which file. It was a great solution process. LOL