Apollo-server: 405 Method Not Allowed when trying to connect react-apollo client to graphql-server-express endpoint with CORS

[Rastamafugg]

I am trying to connect my react-apollo client to my graphql backend and I keep getting a 405 error. My server is hosted on localhost port 3000, and my client is also on localhost (port 8100). I have enabled CORS in express to allow this conenction, but when my client tries to connect, I get the error:

OPTIONS http://localhost:3000/graphql 405 (Method Not Allowed)

Here are the request and response headers copied from my browser's failed request:

General

Request URL:http://localhost:3000/graphql
Request Method:OPTIONS
Status Code:405 Method Not Allowed
Remote Address:[::1]:3000

Response Headers

Access-Control-Allow-Headers:Origin, X-Requested-With, Content-Type, Accept, Accept-Encoding, Accept-Language, Access-Control-Request-Headers, Access-Control-Request-Method
Access-Control-Allow-Methods:POST, GET, OPTIONS
Access-Control-Allow-Origin:*
Allow:POST
Connection:keep-alive
Date:Sun, 15 Jan 2017 20:21:41 GMT
Transfer-Encoding:chunked
X-Powered-By:Express

Request Headers

Accept:*/*
Accept-Encoding:gzip, deflate, sdch, br
Accept-Language:en-US,en;q=0.8,fr;q=0.6
Access-Control-Request-Headers:content-type
Access-Control-Request-Method:POST
Connection:keep-alive
DNT:1
Host:localhost:3000
Origin:http://localhost:8100
Referer:http://localhost:8100/
User-Agent:Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/55.0.2883.87 Safari/537.36

And here is my server script file:

var express = require('express');
var bodyParser = require('body-parser');
var { graphqlExpress } = require('graphql-server-express');
var Schema = require('./server/schema.js');

const PORT = 3000;

var app = express();

app.use(function(req, res, next) {
  res.header("Access-Control-Allow-Origin", "*");
  res.header("Access-Control-Allow-Methods", "POST, GET, OPTIONS");
  res.header("Access-Control-Allow-Headers", "Origin, X-Requested-With, Content-Type, Accept, Accept-Encoding, Accept-Language, Access-Control-Request-Headers, Access-Control-Request-Method");
  next();
});

app.use('/graphql', bodyParser.json(), graphqlExpress({ schema: Schema }));

app.listen(PORT);

console.log('GraphQL Sandbox started on port: 3000');

[DxCx]

hi @Rastamafugg, is GET/POST works?

[Rastamafugg]

Not sure, but I decided to go for another solution to my problem that eliminated the need for CORS. I'll close this issue.

[DxCx]

well @Rastamafugg i was asking that because as far as i know, graphql server doesn't support OPTIONS method.
so basically, there is a possibility that CORS actually worked for you, but graphqlExpress rejected it.
anyway, more debugging is required to understand this usecase..

[corsen2000]

I also ran into this issue for a in development application. Solved for now, by having apollo-client go through my applications server as a proxy to my graphql-server.

Would be nice if graphql-server supported OPTIONS, so that it could be used through CORS.

[artyomtrityak]

i have similar issue for dev environment. Solved by using cors express middleware.

app.use('/graphql', cors(), bodyParser.json(), graphqlExpress((req) => {
  return {
    schema,
    context: {
      user: req.user
    }
  };
}));