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

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?


1 Like

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

Something like this…

  plug Corsica,
    origins: [
    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: "*"

  scope "/" do

If you have an API in another language, you need to investigate how to configure the cors.
I used this tutorial for express:

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

1 Like