CORS policy: No 'Access-Control-Allow-Origin' header is present on the requested resource

Phoenix Forum Questions / Help
, ,
1

Hi all,

I’m getting this error when connecting to the backend:

Access to fetch at 'http://localhost:4000/api' 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.

Absinthe backend (router.ex):

defmodule ErlnoteWeb.Router do
  use ErlnoteWeb, :router

  pipeline :browser do
    plug :accepts, ["html"]
    plug :fetch_session
    plug :fetch_flash
    plug :protect_from_forgery
    plug :put_secure_browser_headers
  end

  pipeline :api do
    plug :accepts, ["json"]
    plug ErlnoteWeb.Context
  end

  scope "/" do
    pipe_through :api

    forward "/api", Absinthe.Plug, schema: ErlnoteWeb.Schema
    forward "/graphiql", Absinthe.Plug.GraphiQL, schema: ErlnoteWeb.Schema, socket: ErlnoteWeb.UserSocket
  end
end

create-react-app: index.js:

const backendHTTPApiLink = createHttpLink({
  uri: "http://localhost:4000/api"
});
const apolloCache = new InMemoryCache();
const loginClient = new ApolloClient({
  link: backendHTTPApiLink,
  cache: apolloCache
});

loginClient.mutate({
  variables: { },
  mutation: gql`
    mutation {
      login(email: "asm@example.com", password: "altosecreto") {
        token
      }
    }`,
})
.then(result => { console.log(result) })
.catch(error => { console.log(error) });

create-react-app: /src/package.json:

{
  "name": "erlnote-frontend",
  "version": "0.1.0",
  "private": true,
  "dependencies": {
    "@absinthe/socket-apollo-link": "^0.2.1",
    "apollo-cache-inmemory": "^1.6.2",
    "apollo-client": "^2.6.3",
    "apollo-link": "^1.2.12",
    "apollo-link-http": "^1.5.15",
    "bootstrap": "^4.3.1",
    "graphql": "^14.3.1",
    "graphql-tag": "^2.10.1",
    "jquery": "^3.4.1",
    "phoenix": "^1.4.8",
    "popper.js": "^1.15.0",
    "react": "^16.8.6",
    "react-apollo": "^2.5.6",
    "react-bootstrap": "^1.0.0-beta.9",
    "react-dom": "^16.8.6",
    "react-redux": "^7.1.0",
    "react-router-dom": "^5.0.1",
    "react-scripts": "3.0.1",
    "redux": "^4.0.1",
    "typescript": "^3.5.1"
  },
  "scripts": {
    "start": "react-scripts start",
    "build": "react-scripts build",
    "test": "react-scripts test",
    "eject": "react-scripts eject"
  },
  "eslintConfig": {
    "extends": "react-app"
  },
  "browserslist": {
    "production": [
      ">0.2%",
      "not dead",
      "not op_mini all"
    ],
    "development": [
      "last 1 chrome version",
      "last 1 firefox version",
      "last 1 safari version"
    ]
  },
  **"proxy": "http://localhost:3000"**
}

Frontend (React dev-server: locahost:3000).
Backend(Phoenix & Absinthe dev-server: localhost:4000/api).

Is there any way to solve?

2

We use Corsica https://github.com/whatyouhide/corsica for this and I think you need it too

3 Likes
3

Very useful package!. I’m going to try it. :smile:

Thank you so much!

4

For anyone who wants a less involved solution I would suggest adding this to the create-react-app package.json instead:

  "proxy": "http://localhost:4000/",