CORS 错误：预检响应中的 Access-Control-Allow-Headers 不允许请求标头字段授权

Question

我正在尝试将请求从一个本地主机端口发送到另一个。我在前端使用 angularjs，在后端使用节点。

由于是CORS请求，在node.js中，我正在使用

res.header('Access-Control-Allow-Origin', '*');
res.header('Access-Control-Allow-Methods', 'GET, POST, PUT, DELETE, PATCH');
res.header('Access-Control-Allow-Headers', 'Origin, X-Requested-With, Content-Type, Accept, Authorization');

在 angular.js 服务文件中，我正在使用

return {
    getValues: $resource(endpoint + '/admin/getvalues', null, {
        'get': {
             method: 'GET',
             headers:{'Authorization':'Bearer'+' '+ $localStorage.token}
             }
     }),
}

我收到以下错误

预检响应中的 Access-Control-Allow-Headers 不允许请求标头字段授权。

请帮忙！

Answer 1

您还必须在允许的标题中添加选项。浏览器在发送原始请求之前发送预检请求。见下文

 res.header('Access-Control-Allow-Methods', 'GET,PUT,POST,DELETE,PATCH,OPTIONS');

来自https://developer.mozilla.org/en-US/docs/Web/HTTP/Methods/OPTIONS

在 CORS 中，发送一个带有 OPTIONS 方法的预检请求，以便服务器可以响应是否可以接受发送带有这些参数的请求。 Access-Control-Request-Method 标头作为预检请求的一部分通知服务器，当实际请求发送时，它将使用 POST 请求方法发送。 Access-Control-Request-Headers 标头通知服务器，当发送实际请求时，将使用 X-PINGOTHER 和 Content-Type 自定义标头发送。服务器现在有机会确定它是否希望在这些情况下接受请求。

已编辑

使用npmjs.com/package/corsnpm包可以避免这种手动配置。我也用过这个方法，简单明了。

Answer 2

如果您不想安装 cors 库而是想修复原始代码，那么您缺少的另一个步骤是 Access-Control-Allow-Origin:* 是错误的。传递身份验证令牌（例如 JWT）时，您必须明确声明调用服务器的每个 url。做身份验证令牌时不能使用“*”。

Answer 3

这是一个 API 问题，如果使用 Postman/Fielder 向 API 发送 HTTP 请求，您将不会收到此错误。对于浏览器，出于安全目的，它们总是在发送实际请求（GET/POST/PUT/DELETE）之前向 API 发送 OPTIONS 请求/预检。因此，如果请求方法是 OPTION，不仅需要在“Access-Control-Allow-Headers”中添加“Authorization”，还需要在“Access-Control-allow-methods”中添加“OPTIONS”为好吧。我就是这样解决的：

if (context.Request.Method == "OPTIONS")
        {
            context.Response.Headers.Add("Access-Control-Allow-Origin", new[] { (string)context.Request.Headers["Origin"] });
            context.Response.Headers.Add("Access-Control-Allow-Headers", new[] { "Origin, X-Requested-With, Content-Type, Accept, Authorization" });
            context.Response.Headers.Add("Access-Control-Allow-Methods", new[] { "GET, POST, PUT, DELETE, OPTIONS" });
            context.Response.Headers.Add("Access-Control-Allow-Credentials", new[] { "true" });

        }

Answer 4

首先您需要安装 cors 使用以下命令：

npm install cors --save

现在将以下代码添加到您的应用启动文件中，例如 (app.js or server.js)

var express = require('express');
var app = express();

var cors = require('cors');
var bodyParser = require('body-parser');

//enables cors
app.use(cors({
  'allowedHeaders': ['sessionId', 'Content-Type'],
  'exposedHeaders': ['sessionId'],
  'origin': '*',
  'methods': 'GET,HEAD,PUT,PATCH,POST,DELETE',
  'preflightContinue': false
}));

require('./router/index')(app);

Answer 5

res.header('Access-Control-Allow-Origin', '*'); 不适用于 Autorization 标头。 只需启用飞行前请求，使用cors library：

var express = require('express')
var cors = require('cors')
var app = express()
app.use(cors())
app.options('*', cors())

Answer 6

对于任何使用 ServiceStack 后端的人；在Cors plugin 中为允许的标头添加“授权”：

Plugins.Add(new CorsFeature(allowedHeaders: "Content-Type,Authorization"));

Answer 7

1. 添加这个 chrome 扩展 cors unblock 并启用“Enable Access-Control-[Allow/Expose]-Headers”。

2. 还可以在同一菜单中打开 Test cors 并测试所有可用选项。单击每个选项并确保您收到每个选项的成功消息（绿色）。

3. 重新加载您的应用程序。 Cors 错误现已消失。