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

Question

我有一个网站 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 控制台中有以下错误。

CORS 策略已阻止从源“网站 1”访问“Web API 2”处的 XMLHttpRequest：预检响应中的 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>

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

Answer 1

你有

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

和

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

换句话说，访问控制设置只允许“内容类型”标头，但您的请求正在发送“授权”标头。显然，这两件事并不相符。

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

尝试

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

反而。

PS 我认为您不需要同时使用 web.config 设置和EnableCors 操作过滤器。我认为您在这里的 EnableCors 声明是多余的。有关更多信息，请参阅/sf/answers/2098046891/。

有关更多信息，请参阅https://developer.mozilla.org/en-US/docs/Web/HTTP/Headers/Access-Control-Allow-Headers