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

Question

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

由于是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/cors npm package 来避免这种手动配置。我也使用过这种方法，它很简单。

Answer 2

这是一个 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 3

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

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

Answer 4

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

Answer 5

首先，您需要使用以下命令安装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 6

对于使用 ServiceStack 后端获取此信息的任何人； 将“授权”添加到Cors 插件中允许的标题：

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 错误现在消失了。