被 CORS 策略阻止：预检响应中的 Access-Control-Allow-Headers 不允许请求标头字段授权

Posted 2023-03-04

【中文标题】被 CORS 策略阻止：预检响应中的 Access-Control-Allow-Headers 不允许请求标头字段授权

【英文标题】：blocked by CORS policy: Request header field authorization is not allowed by Access-Control-Allow-Headers in preflight response

【发布时间】：2019-09-16 02:32:07

【问题描述】：

我有一个网站 1 和一个 Web API 2 我的 Web API 有一个方法名称

 public string Index()
        
            return "Hello world from site 2";
         

在控制器值中。 我像这样从网站 1 调用我的 API

$.ajax(
            url: relativeUrl,
            headers:  "Authorization": "Bearer " + accessToken ,
            type: "GET"
        )
            .done(function (result) 
                console.log("Result: " + result);
                alert(result);
            )
            .fail(function (result) 
                console.log("Error: " + result.statusText);
                alert(result.statusText);
            );

但我的 js 控制台出现以下错误。

从源“网站 1”访问“Web API 2”的 XMLHttpRequest 已 被 CORS 策略阻止：请求标头字段授权不是 Access-Control-Allow-Headers 在预检响应中允许。

我在我的控制器中添加：

[EnableCors(origins: "*", headers: "*", methods: "*", exposedHeaders: "X-Custom-Header")]

在我的 WebAPIConfig.cs 中

config.EnableCors();

在我的 Web.config 中

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

但即使这样我仍然有错误，我不明白我需要添加什么以及在哪里。

【问题讨论】：

您是否在localhost 上同时运行网站和API？

【参考方案1】：

你有

<add name="Access-Control-Allow-Headers" value="Content-Type" />

和

headers:  "Authorization": "Bearer " + accessToken ,

换句话说，Access-Control 设置只允许“content-type”标头，但您的请求发送的是“Authorization”标头。很明显，这两件事不匹配。

错误非常清楚地告诉您 Access-Control-Allow-Headers 响应标头不允许“授权”请求标头。

试试

<add name="Access-Control-Allow-Headers" value="Content-Type, Authorization" />

改为。

附：我认为您不需要同时使用 web.config 设置和 EnableCors 操作过滤器。我认为您在此处的 EnableCors 声明是多余的。请参阅https://***.com/a/29972098/5947043 了解更多信息。

更多信息请见https://developer.mozilla.org/en-US/docs/Web/HTTP/Headers/Access-Control-Allow-Headers

【讨论】：

那是真的。我没有专注于令牌，因为它是空的，所以我没有看到它在我面前是什么。谢谢，现在可以正常工作了。

【参考方案2】：

我不知道这个，但我在 Node.js 中遇到了同样的问题。 我想如果你改变这个

<add name="Access-Control-Allow-Headers" value="Content-Type" />

到

<add name="Access-Control-Allow-Headers" value="*" />

或

<add name="Access-Control-Allow-Headers" value="Authorization" />

因为您正在调用 Authorization 标头。

【讨论】：

是的，将 value 更改为 value="*" 也为我修复了它

很高兴听到我能够帮助您！ ?

正确！ （无服务器）Cloudflare Workers CORS 也需要特殊值 Authorization，而不仅仅是通用 node.js 传统应用程序。