请求的资源上不存在 '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 headers 有任何问题，但它仍然不起作用

来自 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 下面。我已经用 header 中的各种不同的东西做了很多不同的组合，但没有任何效果

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 });
    }
}

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

Answer 1

The response had HTTP status code 401.

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

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

因此服务器返回 401 response/error 页面。并且 many/most 网络服务器未配置为针对错误 responses/pages 发送 Access-Control-Allow-Origin 响应 header。这是您还收到有关 header 丢失消息的唯一原因。

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

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

Answer 2

这是我们在使用 Angular 和 Ionic 时发现的一个典型错误，问题出现是因为当您的应用程序在浏览器中加载时，您的应用程序会加载来自 origin[ 的所有内容=53=] 来自您的本地地址 <a href="http://localhost:4200" rel="noreferrer">http://localhost:4200</a>，然后当您想要将任何 AJAX 请求发送到 localhost:4200 以外的另一台主机时该请求是从不同于 origin 的任何点调用的，它需要一个 CORS（跨源资源共享）预检请求以查看它是否可以访问资源。

解决方案是使用后端代理，这样您就可以劫持某些网址并将它们发送到后端服务器。实施很简单：

1.- 在项目的根文件夹中创建一个文件 proxy.conf.js。

2.- 配置你的代理，在你的 proxy.conf.js 文件里放这个，假设你的新主机在 <a href="http://localhost:3000" rel="noreferrer">http://localhost:3000</a>.

const PROXY_CONFIG = [ { context: [ "/my", "/many", "/endpoints", "/i", "/need", "/to", "/proxy" ], target: "http://localhost:3000", secure: false } ] module.exports = PROXY_CONFIG;

3.- 修改你的 package.json 文件，插入这个 "start": "ng serve --proxy-config proxy.conf.js",

4.- 在您的服务中，将请求的路径从 <a href="http://localhost:3000/endpoints/any/path/that/you/use" rel="noreferrer">http://localhost:3000/endpoints/any/path/that/you/use</a> 更改为 ../endpoints/any/path/that/you/use（假设另一个主机在localhost:3000 上下文是 /endpoints).

5.- 运行 angular 因为根文件夹有： npm start ;这使用代理参数执行 ng serve 。

如果您需要更多相关信息，请查看 Proxy to backend Angular Cli documentation

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

No 'Access-Control-Allow-Origin' header is present on the requested resource + The response had HTTP status code 401

javascript

cors

preflight

angular