当你开始玩自定义请求头，你会得到一个CORS预飞行。这是一个使用HTTP OPTIONS谓词并包含几个头的请求，其中一个是Access-Control-Request-Headers，列出了客户端想要包含在请求中的头。

您需要用适当的CORS报头回复CORS预飞行，以使此工作正常进行。其中之一就是Access-Control-Allow-Headers。该头需要包含与Access-Control-Request-Headers头包含的值相同(或更多)的值。

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

这是你需要添加的使它工作。

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

The browser sends a preflight request (with method type OPTIONS) to check if the service hosted on the server is allowed to be accessed from the browser on a different domain. In response to the preflight request if you inject above headers the browser understands that it is ok to make further calls and i will get a valid response to my actual GET/POST call. you can constraint the domain to which access is granted by using Access-Control-Allow-Origin", "localhost, xvz.com" instead of * . ( * will grant access to all domains)

这个问题用

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

更新:

每次错误:Access-Control-Allow-Headers本身在preflight响应错误中是不允许的，你可以看到chrome开发工具出了什么问题:

上面的错误是缺少Content-Type，所以添加字符串Content-Type到Access-Control-Allow-Headers

加上其他的答案。我也有同样的问题，这是我在我的快速服务器中使用的代码，以允许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报头，然后继续我的正常路由。当有OPTIONS请求时，它只响应CORS报头。

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

公认的答案是可以的，但我很难理解它。这里有一个简单的例子来说明。

在我的ajax请求我有一个标准的授权头。

$$(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服务器中添加授权头:

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

再补充一点，你也可以把这些头文件放到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"
    }
},

我自己刚刚在ASP上下文中遇到了这个问题。NET确保您的Web。配置如下所示:

  <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键的Authorization值。我错过了授权值，这个配置解决了我的问题。

铬:

请求头字段X-Requested-With不被允许 预飞行响应中的Access-Control-Allow-Headers。

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

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

非常好，我在一个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");
    });

我也面临着同样的问题。

我做了一个简单的改变。

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

当我们为请求定制报头时，会出现这个问题。此请求使用HTTP OPTIONS并包含几个头。

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

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

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

我收到了错误的OP声明使用Django, React和Django -cor -headers库。要用这个堆栈修复它，请执行以下操作:

在settings.py中根据官方文档添加以下内容。

from corsheaders.defaults import default_headers

CORS_ALLOW_HEADERS = default_headers + (
'YOUR_HEADER_NAME',
)

消息是明确的，“授权”是不允许在API。集 Access-Control-Allow-Headers: "Content-Type, Authorization"

我在Angular 6中也遇到了同样的问题。我通过使用下面的代码解决了这个问题。在组件中添加代码。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...
})}

在花了差不多一天的时间后，我才发现添加下面两个代码解决了我的问题。

将此添加到Global.asax中

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

并在web配置中添加以下内容

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

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

你可以通过编写一个过滤器来处理这个问题，在里面你必须检查选项调用API调用并返回一个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
    }

}

如果您试图在请求标头上添加自定义标头，则必须让服务器知道允许发生特定的标头。在过滤请求的类中执行此操作。在下面的例子中，自定义头名称为"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");
    }
}

将这些头添加到ajax或js函数中

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

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

在preflight响应中Access-Control-Allow-Headers不允许请求报头字段授权

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

还要确保你拼写的授权是美式的，而不是英式的。那是我生命中的半小时，我不会再回来了。Thx美国!(叹息)

因此，给那些被卡住的人一个提示:检查一下你是否正确拼写了“Authorization”这个单词。如果你设置Access-Control-Allow-Headers = [" authorization "]，你就允许了错误的头!

是的，在集成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();
});

跟我来谢谢

确保你从客户端需要的所有头信息都传递给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");

我刚刚添加了response。headers;后

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

CORS设置在后端(Django)作为官方文档， Djnago-cors-headers

如果你正在配置AWS API网关(例如，它正在从React AWS Amplify应用程序发送请求)，解决方案是附加字符串

Access-Control-Allow-Methods、Access-Control-Allow-Headers Access-Control-Allow-Origin

在启用CORS对话框fpr给定端点&方法中的Access-Control-Allow-Headers字段:

.．.然后部署API:

在接下来的js我的问题得到解决使用

const cors=micro_cors({
   origin:"https://studio.apollographql.com",
   allowMethods:['POST','GET','PUT','PATCH','DELETE','OPTIONS'],
   allowCredentials:true,
   allowHeaders:['X-Requested-With','X-HTTP-Method-Override','Content-Type','Authorization','Accept','Access-Control-Allow-Credentials','Access-Control-Allow-Origin' ]
})

然后把它吸进去

 export default cors(async function handler(req, res) {
   await serverStart
   if(req.method==="OPTIONS"){
    res.end()
     return false
   }
     apolloserver.createHandler({path:"/api/graphql"})(req,res)

 })