javascript - 请求的资源上不存在 'Access-Control-Allow-Origin' header + 响应具有 HTTP 状态代码 401

Question

XMLHttpRequest cannot load http://192.168.1.253:8080/... No 'Access-Control-Allow-Origin' header is present on the requested resource. Origin 'http://localhost:4200' is therefore not allowed access. The response had HTTP status code 401.

非常常见的错误，有很多可能的解决方案都没有奏效。我了解(我认为)CORS 应该如何工作，而且我没有发现我的 HTTP header 有任何问题，但它仍然不起作用

来自 Chrome:

Request URL:http://192.168.1.253:8080/...
Request Method:OPTIONS
Status Code:200 OK
Remote Address:192.168.1.253:8080
Referrer Policy:no-referrer-when-downgrade
Response Headers
Access-Control-Allow-Headers:x-requested-with,accept,content-
type,authorization
Access-Control-Allow-Methods:POST, GET, PUT, PATCH, OPTIONS, DELETE
Access-Control-Allow-Origin:*
Access-Control-Max-Age:3600
Allow:GET, HEAD, POST, PUT, DELETE, TRACE, OPTIONS, PATCH
Cache-Control:no-cache, no-store, max-age=0, must-revalidate
Connection:keep-alive
Content-Length:0
Date:Mon, 15 May 2017 21:50:55 GMT
Expires:0
Pragma:no-cache
Server:...
X-Content-Type-Options:nosniff
X-Frame-Options:DENY
X-XSS-Protection:1; mode=block
Request Headers
Accept:*/*
Accept-Encoding:gzip, deflate, sdch
Accept-Language:en-US,en;q=0.8
Access-Control-Request-Headers:authorization,content-type
Access-Control-Request-Method:GET
Cache-Control:no-cache
Connection:keep-alive
Host:192.168.1.253:8080
Origin:http://localhost:4200
Pragma:no-cache
Referer:http://localhost:4200/...
User-Agent:Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 
(KHTML, like Gecko) Chrome/57.0.2987.133 Safari/537.36

我的理解是 OPTIONS 响应需要 Access-Control-Allow-Origin header 设置并允许方法类型和 header 值，它确实如此

相关 Angular 如下。我已经用标题中的各种不同的东西做了很多不同的组合，但没有任何效果

private getObject<T>(path: string): Promise<T> {
    return this.http.get(SERVER_URL + path, this.authenticationToken())
        .toPromise()
        .then(response => response.json() as T)
        .catch(this.handleError);
}

private authenticationToken() : RequestOptions {
    let login = JSON.parse(sessionStorage.getItem('currentLogin'));
    if (login && login.authenticationToken) {
        let headers = new Headers({ 
            'Authorization': 'Basic ' + login.authenticationToken,
            'Content-type': 'application/json', 
          });
        return new RequestOptions({ headers: headers });
    }
}

我觉得我遗漏了一些明显的东西，但这让我抓狂，感谢任何帮助。请注意，这确实适用于预先存在的 Ember 应用程序，所以我不认为它是服务器

Answer 1

The response had HTTP status code 401.

401表示认证错误。问题中的错误消息不是来自预检 OPTIONS 请求的响应。它似乎是针对您尝试发送的实际 GET 请求。

因此，根据该错误消息，最有可能的情况似乎是浏览器的预检 OPTIONS 请求成功，但您的 GET 请求由于身份验证失败而未成功。

因此服务器返回 401 响应/错误页面。许多/大多数 Web 服务器未配置为发送错误响应/页面的 Access-Control-Allow-Origin 响应 header 。这是您还收到有关该 header 丢失的消息的唯一原因。

但是错误响应缺少的 header 并不是导致您出现问题的原因；相反，401 是。

看来您可能想弄清楚是什么原因导致服务器发送 401 响应 - 为什么您会收到身份验证失败。如果您修复了该问题，您可能会收到来自服务器的响应，其中包含预期的 Access-Control-Allow-Origin 响应 header 。