CODEWITHSUNDEEP
javascriptcors
gpbaculio
gpbaculio

Reputation: 5968

server responds with 405 error even with 'Access-Control-Allow-Origin': '*'?

SO my graphql api is at https://gpbaculio-tributeapp.herokuapp.com/graphql I configured the uploaded, headers like this:

const fetchQuery = (operation, variables) => {
  return fetch('/graphql', {
    method: 'POST',
    headers: {
      'Accept': 'application/json',
      'Content-Type': 'application/json',
      'Access-Control-Allow-Origin': '*'
    },
    body: JSON.stringify({
      query: operation.text,
      variables,
    }),
  }).then(response => {
    return response.json()
  })
}

I have read from MDN.

For requests without credentials, the server may specify "*" as a wildcard, thereby allowing any origin to access the resource.

So I am trying to publish the app in codepen, and this is my error:

Failed to load https://gpbaculio-tributeapp.herokuapp.com/graphql: Response to preflight request doesn't pass access control check: No 'Access-Control-Allow-Origin' header is present on the requested resource. Origin 'https://s.codepen.io'

Why is it telling me it doesn't pass 'Access-Control-Allow-Origin' headers?

Is there something wrong with my headers config?

Upvotes: 0

Views: 3181

Answers (4)

Seena V P
Seena V P

Reputation: 994

Try setting cors options and Access-Control-Allow-Origin headers in server side.

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');
    next();
}
graphQLServer.use(allowCrossDomain);

This may help you

Upvotes: 1

JiangangXiong
JiangangXiong

Reputation: 2426

The problem is the browser's cross-origin problem.

The Access-Control-Allow-Origin header should be return by the server's response, and the header means the origin domain that can access to the API.

The client's request often take a header Origin, it's value is the current host address, like, www.example.com.

The values of Access-Control-Allow-Origin must contain the value of Origin means that the origin can access this API service. And then the browser will continue the request. If not, the browser will cancel the request.

enter image description here

More infomation, refre to CORS https://developer.mozilla.org/en-US/docs/Web/HTTP/Access_control_CORS

Upvotes: 0

rombarcz
rombarcz

Reputation: 1614

CORS specification states, that requests for resources are "preflighted" with HTTP OPTIONS request, and reply headers for that OPTIONS must contain header:

Access-Control-Allow-Origin: *

you might check it with curl:

$ curl -I -X OPTIONS https://gpbaculio-tributeapp.herokuapp.com/graphql
HTTP/1.1 405 Method Not Allowed
Server: Cowboy
Connection: keep-alive
X-Powered-By: Express
Allow: GET, POST
Content-Type: application/json; charset=utf-8
Content-Length: 97
Date: Sat, 23 Sep 2017 11:24:39 GMT
Via: 1.1 vegur

Add OPTION handler with needed header, so your server answers:

$ curl -I -X OPTIONS https://example.localhost/
HTTP/1.1 204 No Content
Server: nginx/1.4.7
Date: Sat, 23 Sep 2017 11:27:51 GMT
Connection: keep-alive
Keep-Alive: timeout=5
Access-Control-Allow-Origin: *
Access-Control-Allow-Methods: GET, POST, OPTIONS
Access-Control-Allow-Headers: DNT,X-CustomHeader,Keep-Alive,User-Agent,X-Requested-With,If-Modified-Since,Cache-Control,Content-Type,Content-Range,Range
Content-Type: text/plain; charset=utf-8
Content-Length: 0

Upvotes: 1

Ivar
Ivar

Reputation: 6809

You are setting the header in your request (in the client). The Access-Control-Allow-Origin header needs to be set on the server-side, and when you make a request, the response should contain that header.

The reason behind this header is that not every webpage can query every third-party domain. Being able to set this header from the request would defeat that whole point.

Upvotes: 3

Related Questions