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

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…

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;
    }

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

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

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

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.

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.

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: cors middleware · Express.js

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

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!

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.