即使使用“Access-Control-Allow-Origin”，服务器也会响应 405 错误：“*”？

Question

所以我的 graphql api 在https://gpbaculio-tributeapp.herokuapp.com/graphql 我配置了上传的标题，如下所示：

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()
  })
}

我已经阅读了 MDN。

对于没有凭据的请求，服务器可以指定“*”作为 通配符，从而允许任何来源访问资源。

所以我试图在 codepen 中发布应用程序，这是我的错误：

无法加载https://gpbaculio-tributeapp.herokuapp.com/graphql： 对预检请求的响应未通过访问控制检查：否 请求中存在“Access-Control-Allow-Origin”标头 资源。来源'https://s.codepen.io'

为什么它告诉我它没有通过“Access-Control-Allow-Origin”标头？

我的标头配置有问题吗？

Answer 1

您正在您的请求（在客户端）中设置标头。 Access-Control-Allow-Origin 标头需要在服务器端设置，并且当您发出请求时，响应应包含该标头。

此标头背后的原因是并非每个网页都可以查询每个第三方域。能够从请求中设置此标头将破坏这一点。

Answer 2

尝试在服务器端设置 cors 选项和 Access-Control-Allow-Origin 标头。

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);

这可能对你有帮助

Answer 3

CORS 规范规定，对资源的请求是使用 HTTP OPTIONS 请求“预检”的，并且该 OPTIONS 的回复标头必须包含标头：

Access-Control-Allow-Origin: *

你可以用 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

添加带有所需标头的 OPTION 处理程序，以便您的服务器回答：

$ 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

Answer 4

问题是浏览器的跨域问题。

Access-Control-Allow-Origin header 应该是服务器响应返回的，header 表示可以访问 API 的源域。

客户端的请求通常带一个headerOrigin，它的值是当前主机地址，比如www.example.com。

Access-Control-Allow-Origin 的值必须包含Origin 的值，表示源端可以访问此 API 服务。然后浏览器将继续请求。如果没有，浏览器将取消请求。

更多信息，请参考 CORS https://developer.mozilla.org/en-US/docs/Web/HTTP/Access_control_CORS