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

Abh*_*tha 36 javascript http-headers node.js cors angularjs

我试图将请求从一个localhost端口发送到另一个.我在后端的节点和节点上使用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');
Run Code Online (Sandbox Code Playgroud)

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

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

我收到以下错误

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

请帮忙!

vik*_*kas 30

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

 res.header('Access-Control-Allow-Methods', 'GET,PUT,POST,DELETE,PATCH,OPTIONS');
Run Code Online (Sandbox Code Playgroud)

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

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

EDITED

你可以使用npmjs.com/package/cors npm package 避免这种手动配置.我也使用过这种方法,它清晰简单.

  • res.header('Access-Control-Expose-Headers', 'Authorization');//必须公开以便浏览器有权限访问这个header (2认同)

Hun*_* Vu 26

这是一个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" });

        }
Run Code Online (Sandbox Code Playgroud)


o.z*_*o.z 8

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())
Run Code Online (Sandbox Code Playgroud)