405 不允许使用 CORS 的方法

Question

我正在尝试使用 Angular 开发前端应用程序。由于我在 HTTP POST 和 GET 请求中添加了 授权标头，我得到 405 Method Not Allowed，尽管我似乎允许服务器端的所有内容。

我的浏览器 Chrome 中的调试器说它要求Access-Control-Request-Method: POST 和Access-Control-Request-Headers: authorization，我的后端允许access-control-allow-methods: GET, POST 和access-control-allow-headers: authorization 以及access-control-allow-credentials: true。

我看不出我在这里缺少什么。服务器是 node.js express 服务器，headers 设置如下：

res.setHeader('Access-Control-Allow-Origin', '*');
res.setHeader('Access-Control-Allow-Methods', 'GET, POST');
res.setHeader('Access-Control-Allow-Credentials', 'true');
res.setHeader('Access-Control-Allow-Headers', 'authorization');

前端代码（Angular 5）如下所示：

this.http.request('post', apiUrl, {
  headers: new HttpHeaders().set('Authorization', 'Bearer abc'),
}).subscribe(response => {
  // some code
});

this.http 是 Angular 的 HttpClient 的一个实例。

我的前端应用程序来自我的本地主机域“http://frontend.localhost/app”，我的后端服务器位于“http://backend.localhost”。

我的问题是，我是否缺少一些必须在后端设置的标头？我需要在前端应用程序中设置一些选项吗？

Answer 1

我发现我的问题不与 CORS 直接相关。我的后端目前只是一个 GraphQL 服务器，它允许 GET 和 POST 请求。

如果我在客户端添加额外的标头，浏览器会通过预检 OPTIONS 请求检查 CORS，到 GraphQL 服务器所在的 URL。这会导致 405 Method Not Allowed GraphQL 服务器产生的错误，而不是 Express 或浏览器。