预检响应中不允许请求 header 字段 Access-Control-Allow-Headers 本身

Question

我已经多次遇到 CORS 问题并且通常可以解决它，但我想通过从 MEAN 堆栈范例中看到它来真正理解它。

之前我只是在我的 express 服务器中添加中间件来捕获这些东西，但看起来有某种 pre-hook 错误了我的请求。

Request header field Access-Control-Allow-Headers is not allowed by Access-Control-Allow-Headers in preflight response

我认为我可以做到这一点：

app.use(function(req, res, next) {
  res.header("Access-Control-Allow-Headers","*")
})

或等效项，但这似乎无法解决问题。我当然也试过了

app.use(function(req, res, next) {
  res.header("Access-Control-Allow-Headers","Access-Control-Allow-Headers")
})

仍然没有运气。

Answer 1

当您开始使用自定义请求 headers 时，您将获得 CORS 预检。这是一个使用 HTTP OPTIONS 动词并包含多个 header 的请求，其中之一是 Access-Control-Request-Headers 列出了客户端希望包含在请求中的 header。

您需要使用适当的 CORS header 回复该 CORS 预检才能完成这项工作。其中之一确实是Access-Control-Allow-Headers。 header 需要包含与 Access-Control-Request-Headers header 相同的值（或更多）。

https://fetch.spec.whatwg.org/#http-cors-protocol 更详细地解释了此设置。

Answer 2

这是您需要添加的内容才能使其正常工作。

response.setHeader("Access-Control-Allow-Origin", "*");
response.setHeader("Access-Control-Allow-Credentials", "true");
response.setHeader("Access-Control-Allow-Methods", "GET,HEAD,OPTIONS,POST,PUT");
response.setHeader("Access-Control-Allow-Headers", "Access-Control-Allow-Headers, Origin,Accept, X-Requested-With, Content-Type, Access-Control-Request-Method, Access-Control-Request-Headers");

浏览器发送预检请求（方法类型为 OPTIONS）以检查是否允许从不同域的浏览器访问服务器上托管的服务。如果您在 headers 上方注入，作为对预检请求的响应，浏览器知道可以进行进一步的调用，我将得到对我实际 GET/POST 调用的有效响应。您可以使用 Access-Control-Allow-Origin", "localhost, xvz.com" 而不是 * 来限制授予访问权限的域。（* 将授予对所有域的访问权限）

Answer 3

这个问题用

解决了

 "Origin, X-Requested-With, Content-Type, Accept, Authorization"

特别是在我的项目中(express.js/nodejs)

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

更新：

每次都error: Access-Control-Allow-Headers is not allowed by itself in preflight response error 你可以看看有什么问题 chrome developer tool:

缺少上述错误 Content-Type 所以将字符串 Content-Type 添加到 Access-Control-Allow-Headers

Answer 4

添加到其他答案。我遇到了同样的问题，这是我在我的快速服务器中使用的允许 REST 调用的代码：

app.all('*', function(req, res, next) {
  res.header('Access-Control-Allow-Origin', 'URLs to trust of allow');
  res.header('Access-Control-Allow-Methods', 'GET, POST, OPTIONS, PUT, PATCH, DELETE');
  res.header('Access-Control-Allow-Headers', 'Content-Type');
  if ('OPTIONS' == req.method) {
  res.sendStatus(200);
  } else {
    next();
  }
});

这段代码基本上做的是拦截所有请求并添加 CORS headers，然后继续我的正常路由。当有 OPTIONS 请求时，它仅响应 CORS headers.

编辑：我在同一台机器上对两个单独的 nodejs express 服务器使用此修复程序。最后我用一个简单的代理服务器解决了这个问题。

Answer 5

接受的答案还可以，但我很难理解。所以这里有一个简单的例子来阐明它。

在我的 ajax 请求中，我有一个标准授权 header。

$$(document).on('ajaxStart', function(e){
var auth_token = localStorage.getItem(SB_TOKEN_MOBILE);
if( auth_token ) {
    var xhr = e.detail.xhr;

    xhr.setRequestHeader('**Authorization**', 'Bearer ' + auth_token);
}

此代码产生问题中的错误。我必须在我的 nodejs 服务器中做的是在允许的 headers:

中添加授权

res.setHeader('Access-Control-Allow-Headers', 'X-Requested-With,content-type,**Authorization**');

Answer 6

只是补充一点，你可以把那些 headers 也放到 Webpack 配置文件中。我需要它们，因为我是运行 webpack 开发服务器。

devServer: {
    headers: {
      "Access-Control-Allow-Origin": "*",
      "Access-Control-Allow-Credentials": "true",
      "Access-Control-Allow-Methods": "GET,HEAD,OPTIONS,POST,PUT",
      "Access-Control-Allow-Headers": "Origin, X-Requested-With, Content-Type, Accept, Authorization"
    }
},

Answer 7

我自己运行解决了这个问题，在 ASP.NET 的背景下确保你的 Web.config 看起来像这样：

  <system.webServer>
<modules>
  <remove name="FormsAuthentication" />
</modules>

<handlers>
  <remove name="ExtensionlessUrlHandler-Integrated-4.0" />
  <!--<remove name="OPTIONSVerbHandler"/>-->
  <remove name="TRACEVerbHandler" />
  <!--
  <add name="ExtensionlessUrlHandler-Integrated-4.0" path="*." verb="*" type="System.Web.Handlers.TransferRequestHandler" preCondition="integratedMode,runtimeVersionv4.0" />
  -->
</handlers>

<httpProtocol>
  <customHeaders>
    <add name="Access-Control-Allow-Origin" value="*" />
    <add name="Access-Control-Allow-Headers" value="Content-Type, Authorization" />
    <add name="Access-Control-Allow-Methods" value="GET, POST, PUT, DELETE, OPTIONS" />
  </customHeaders>
</httpProtocol>

注意 Access-Control-Allow-Headers 键的授权值。我缺少授权值，此配置解决了我的问题。

Answer 8

在Chrome中：

Request header field X-Requested-With is not allowed by Access-Control-Allow-Headers in preflight response.

对我来说，此错误是由 此调用的 URL 中的尾随 space 触发的。

jQuery.getJSON( url, function( response, status, xhr ) {
   ...
}

Answer 9

非常好，我在 silex 项目中使用了它

$app->after(function (Request $request, Response $response) {
        $response->headers->set('Access-Control-Allow-Origin', '*');
        $response->headers->set("Access-Control-Allow-Credentials", "true");
        $response->headers->set("Access-Control-Allow-Methods", "GET,HEAD,OPTIONS,POST,PUT");
        $response->headers->set("Access-Control-Allow-Headers", "Origin, X-Requested-With, Content-Type, Accept, Authorization");
    });

Answer 10

我遇到了同样的问题。

我做了一个简单的改动。

  <modulename>.config(function($httpProvider){
    delete $httpProvider.defaults.headers.common['X-Requested-With'];
});

Answer 11

当我们为使用 HTTP OPTIONS 并包含多个 header 的 request.This 请求自定义 header 时会出现此问题。

此请求所需的 header 是 Access-Control-Request-Headers ，它应该是响应 header 的一部分并且应该允许来自所有起源。有时它也需要 Content-Type 以及 header 的响应。所以你的回应 header 应该是这样的 -

response.header("Access-Control-Allow-Origin", "*"); // allow request from all origin
response.header("Access-Control-Allow-Methods", "GET,HEAD,OPTIONS,POST,PUT");
response.header("Access-Control-Allow-Headers", "Access-Control-Allow-Headers, Origin, X-Requested-With, Content-Type, Accept, Authorization");

Answer 12

res.setHeader('Access-Control-Allow-Headers', '*');

Answer 13

我收到了 OP 指出的使用 Django、React 和 django-cors-headers 库的错误。要使用此堆栈修复它，请执行以下操作：

在 settings.py 中根据 official documentation 添加以下内容。

from corsheaders.defaults import default_headers

CORS_ALLOW_HEADERS = default_headers + (
'YOUR_HEADER_NAME',
)

Answer 14

消息很明确，'Authorization' 在 API 中是不允许的。集
Access-Control-Allow-Headers: "Content-Type, Authorization"

Answer 15

我在 Angular 6 中也遇到了同样的问题。我使用以下代码解决了这个问题。在 component.ts 文件中添加代码。

import { HttpHeaders } from '@angular/common/http';

headers;

constructor() {
    this.headers = new HttpHeaders();
    this.headers.append('Access-Control-Allow-Headers', 'Authorization');
}

getData() {
    this.http.get(url,this.headers). subscribe (res => {
    // your code here...
})}

Answer 16

我花了将近一天的时间，才发现添加以下两个代码解决了我的问题。

将此添加到 Global.asax

protected void Application_BeginRequest()
{
  if (Request.HttpMethod == "OPTIONS")
  {
    Response.StatusCode = (int)System.Net.HttpStatusCode.OK;             
    Response.End();
  }
}

并在网络配置中添加以下内容

<httpProtocol>
  <customHeaders>
    <add name="Access-Control-Allow-Origin" value="*" />        
    <add name="Access-Control-Allow-Methods" value="*" />
    <add name="Access-Control-Allow-Headers" value="Content-Type, Authorization" />
  </customHeaders>
</httpProtocol>

Answer 17

在 Post API 调用中，我们在请求 body 中发送数据。因此，如果我们将通过向 API 调用添加任何额外的 header 来发送数据。然后会发生第一个 OPTIONS API 调用，然后会发生 post 调用。因此，您必须先处理 OPTION API 调用。

您可以通过编写一个过滤器来处理这个问题，并且在其中您必须检查选项调用 API 调用和 return 200 OK 状态。下面是示例代码：

package com.web.filter;

import java.io.IOException;

import javax.servlet.Filter;
import javax.servlet.FilterChain;
import javax.servlet.FilterConfig;
import javax.servlet.ServletException;
import javax.servlet.ServletRequest;
import javax.servlet.ServletResponse;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;

import org.apache.catalina.connector.Response;

public class CustomFilter implements Filter {
    public void doFilter(ServletRequest req, ServletResponse res, FilterChain chain)
            throws IOException, ServletException {
        HttpServletResponse response = (HttpServletResponse) res;
        HttpServletRequest httpRequest = (HttpServletRequest) req;
        response.setHeader("Access-Control-Allow-Origin", "*");
        response.setHeader("Access-Control-Allow-Methods", "POST, GET, PUT, OPTIONS, DELETE");
        response.setHeader("Access-Control-Max-Age", "3600");
        response.setHeader("Access-Control-Allow-Headers", "x-requested-with, Content-Type");
        if (httpRequest.getMethod().equalsIgnoreCase("OPTIONS")) {
            response.setStatus(Response.SC_OK);
        }
        chain.doFilter(req, res);
    }

    public void init(FilterConfig filterConfig) {
        // TODO
    }

    public void destroy() {
        // Todo
    }

}

Answer 18

如果您尝试在请求 header 上添加自定义 header，您必须让服务器知道允许发生特定的 header。这样做的地方是在过滤请求的 class 中。在下面显示的示例中，自定义 header 名称是 "type":

public class CorsFilter implements Filter {
    @Override
    public void doFilter(ServletRequest req, ServletResponse res, FilterChain chain) throws IOException, ServletException {
        HttpServletRequest request = (HttpServletRequest) req;
        HttpServletResponse response = (HttpServletResponse) res;
        response.setHeader("Access-Control-Allow-Origin",  request.getHeader("Origin"));
        response.setHeader("Access-Control-Allow-Credentials", "true");
        response.setHeader("Access-Control-Allow-Methods", "GET,PUT,POST,DELETE,PATCH,OPTIONS");
        response.setHeader("Access-Control-Max-Age", "3600");
        response.setHeader("Access-Control-Allow-Headers", "Content-Type, Accept, X-Requested-With, remember-me, Authorization, type ");
        response.setHeader("Access-Control-Expose-Headers","Authorization");
    }
}

Answer 19

const express = require('express')
const cors = require('cors')
const app = express()

app.get('/with-cors', cors(), (req, res, next) => {
  res.json({ msg: 'WHOAH with CORS it works!  ' })
})

在 get 函数中添加 cors 对我有用

Answer 20

将此 headers 添加到您的 ajax 或 js 函数中

headers: {
            "Cache-Control": null,
            "X-Requested-With": null,
        }

Answer 21

我在尝试连接到 Django 后端时遇到了类似的问题：

Request header field authorisation is not allowed by Access-Control-Allow-Headers in preflight response

经过几个小时的搜索，我终于在以下评论的帮助下解决了这个问题：

Also make sure you're spelling Authorization the american way not the Britsh way. That's half an hour of my life I won't get back. Thx USA! [sigh]

因此，给被卡住的其他人一个提示：检查您是否正确拼写了“授权”一词。如果你设置 Access-Control-Allow-Headers = ["Authorisation"]，你允许错误的 header!

Answer 22

是的，使用这个我在 angular 应用程序中集成时也遇到了问题。

写这个。

app.use((req, res, next) => {
  res.setHeader("Access-Control-Allow-Origin", "*");
  res.setHeader(
    "Access-Control-Allow-Headers",
    "Origin,X-Requested-With, Content-Type, Accept, Authorization"
  );
  res.setHeader("Access-Control-Allow-Methods", "GET,POST,PATCH,PUT,DELETE,OPTIONS");
  next();
});

关注我谢谢

Answer 23

确保您从客户端要求的所有 headers 都传递给 Access-Control-Allow-Headers，否则您将运行保留在 CORS 问题中。在这种情况下，那将是 'x-api-key' 否则你会运行进入 cors 问题

const options = {
  method: "GET",
  headers: new Headers({
    "X-API-Key": "ds67GHjkshjh00ZZhhsskhjgasHJHJHJ&87",
  }),
};

response.setHeader(
    "Access-Control-Allow-Headers", 
    "X-CSRF-Token, X-Requested-With, Accept, Accept-Version, Content-Length, Content-MD5, Content-Type, Date, X-Api-Version, x-api-key");

Answer 24

我刚刚在

之后添加了response.headers;

http.Response response = await http.get(
        Uri.parse(
          api + "api/users/all",
        ),
      );

后端（Django）中的 CORS 设置作为官方文档， Djnago-cors-headers

预检响应中不允许请求 header 字段 Access-Control-Allow-Headers 本身

Request header field Access-Control-Allow-Headers is not allowed by itself in preflight response

cors

express

meanjs