How to make Graphql run with CORS

apollo graphql cors
graphql-yoga cors
apollo-server-express cors
graphql-java cors
apolloserver(( cors))
appsync cors
graphql cors preflight
node express graphql cors

I've read several articles about this, but none of them work for me.

https://github.com/graphql/express-graphql/issues/14

Here is my expressjs code:

app.use("/graphql", function (req, res, next) {
  res.header('Access-Control-Allow-Origin', 'http://localhost:8080');
  res.header('Access-Control-Allow-Headers', 'Content-Type, Authorization, Content-Length, X-Requested-With');
  if (req.method === 'OPTIONS') {
    res.sendStatus(200);
  } else {
    next();
  }
});


// apply graphql middleware
app.use('/graphql', graphqlHTTP({
  schema: schema,
  rootValue: rootResolver,
  graphiql: true,
}))

If I do it this way, the pre-flight OPTIONS is successful, but the actual POST request fails.

I am using this function to make request to local graphql server.

function postFn(url, payload) {
  return $.ajax({
    method: 'POST',
    url: url,
    contentType: 'application/json',
    xhrFields: {
      withCredentials: true
    },
    data: payload
  });
}

Here is the front-end code to trigger the POST request:

  let query = `
    query myqury($offset: Int, $limit: Int) {
      clients(limit:$limit , offset:$offset ) {
        docs{
          _id
          full_name
        }
        total
        limit
        offset
      }
    }
  `
  var variables = {
    offset: offset,
    limit: limit
  }
  let payload = {
    query: query,
    variables: variables
  }
  return request.post(graphQlEndpoint, payload)

The error message is:

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

I had the same issue as you. Using the graphQL on an express server.

Try using express cors

Use it in your express code like this

const express = require( `express` );
const graphqlHTTP = require( `express-graphql` );
const cors = require( `cors` );
const app = express();

app.use( cors() );
app.use(
    `/graphql`,
    graphqlHTTP( {
        schema: schema, // point to your schema 
        rootValue: rootResolver, // point to your resolver 
        graphiql: true
    } )
);

How to enable CORS for Express-GraphQL & Apollo Server, If I do it this way, the pre-flight OPTIONS is successful, but the actual POST request fails. I am using this function to make request to local graphql server. function  By default, all CORS requests to the Hasura GraphQL engine are allowed. To run with more restrictive CORS settings, use the --cors-domain flag or the HASURA_GRAPHQL_CORS_DOMAIN ENV variable. The default value is * , which means CORS headers are sent for all domains.

I had the same issue when making calls using Vue client. The only way I could resolve was to disable the Cross-Origin restriction on the browser for testing purposes.

Support CORS enabled servers and OPTIONS requests · Issue #14 , How to enable CORS for Express-GraphQL & Apollo Server Two URLs are said to have the same origin if the following three properties are /graphql, you'll now get an access control error if you're trying to run the app:. If you build an API from scratch with Node.js, you don’t need Express.js if you want to run a GraphQL endpoint. Apollo 2 now ships with lots of features, so that you don’t need a complicated setup anymore. Luckily, apollo-server allows you to add cors as an option.

Please insert below code in your server.js file

const graphQLServer = express();
const corsOptions = {
    origin(origin, callback) {
        callback(null, true);
    },
    credentials: true
};
graphQLServer.use(cors(corsOptions));
var allowCrossDomain = function(req, res, next) {
    res.header('Access-Control-Allow-Origin', '*');
    res.header('Access-Control-Allow-Methods', 'GET,PUT,POST,DELETE,OPTIONS');
    res.header('Access-Control-Allow-Headers', 'Content-Type,token');
    next();
}
graphQLServer.use(allowCrossDomain);

How to enable CORS for apollo-server :: rockyourcode, Create a flag for enabling CORS in express-graphql and enable OPTION @​waltfy I am trying to run through the demo using a a node-express  We need the CORS plug to grant permission to the client to make requests. Run mix deps.get to install the new dependencies. Now we can start building the API. A GraphQL API is made of types and resolvers. We'll first build the Users type using a GraphQL schema language to represent an object you can fetch, and define all the fields that can be

CORS in Apollo Client & Apollo Server - DEV Community ‍ ‍ , See the MDN Docs: Cross-Origin Resource Sharing (CORS) is a to let a web application running at one origin (domain) have permission to access create-​react-app ) will make a request to your GraphQL back-end server. GraphQL is incredibly easy to use on the client, but writing a good GraphQL server can be a bit more work, and can sometimes be tricky. Having built a couple of GraphQL servers while working on Apollo, I thought it would be useful to do a writeup about a of the lessons I learned along the way.

POST and GET format - Apollo Server, GraphQL Server Not Setting JWT Cookie I was running into various problems with CORS as I tried to pass Using apollo-server-express instead of apollo-​server : This essentially allows you to create an express app and  Add User Authentication to Your Express + GraphQL API. One simple way to add authentication to your project is with Okta. Okta is a cloud service that allows developers to create, edit, and securely store user accounts and user account data, and connect them with one or multiple applications.

Authentication - Client (React), Apollo Server accepts both GET and POST requests. If Apollo Server is running under a different origin than your client, you will need to enable CORS support on the server, or proxy the GraphQL requests through a web server under the  An OPTIONS request should respond with the CORS headers, meaning ideally the user would catch OPTIONS requests before letting the request fall through to express-graphql. If express-graphql responds with any headers its by definition not being agnostic, so I'm curious how we can support both cases without a flag indicating how to respond.

Comments
  • Interestin choice of quotes (backtick templates rather than string literals) but good answer, i just put cors() in and hey presto! what a great day
  • I normally only use backticks not sure why I used single quotes on this occasion. But it means I can easily use es6 string interpolation
  • Unless this is a public API, disabling all CORS security (what this answer recommends) is a large security risk.
  • where is cors defined?