请求的资源上没有"Access-Control-Allow-Origin"标头+响应具有HTTP状态代码401

Question

XMLHttpRequest无法加载http://192.168.1.253:8080/ ...请求的资源上没有"Access-Control-Allow-Origin"标头.因此不允许来源' http:// localhost:4200 '访问.响应具有HTTP状态代码401.

很常见的错误,有很多可能的解决方案没有奏效.我理解(我认为)CORS应该如何工作,我没有看到我的HTTP标头有什么问题,但它仍然不起作用

来自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标头集并允许方法类型和标头值

相关角度如下.我已经在标题中对各种不同的东西做了相当多的不同组合,但没有任何作用

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

响应具有HTTP状态代码401.

401表示验证错误.问题中的错误消息不是来自预检OPTIONS请求的响应.它似乎是GET你想要发送的实际请求.

因此,基于该错误消息,最可能的情况是浏览器的预检OPTIONS请求成功,但GET由于身份验证失败,您的请求未成功.

所以服务器返回401响应/错误页面.并且许多/大多数Web服务器未配置为发送Access-Control-Allow-Origin错误响应/页面的响应头.这也是你收到关于该标题丢失的消息的唯一原因.

但错误响应的缺少标头不是您的问题的原因; 相反,401是.

因此,您似乎可能想知道是什么导致服务器发送401响应 - 为什么您的身份验证失败.如果您修复了这个问题,您似乎可以从服务器获得包含Access-Control-Allow-Origin响应标头的响应.

Answer 2

这是我们使用Angular和Ionic时发现的典型错误,问题出现是因为当您的应用程序中的应用程序加载应用程序加载来自您本地地址的来源的所有内容http://localhost:4200时,那么当您想要制作任何AJAX时请求发送到另一个主机,而不是 localhost:4200 从与源不同的任何点调用请求,它需要CORS(跨源资源共享)预检请求以查看它是否可以访问该资源.

解决方案是使用代理到后端,使用此功能,您可以高举某些网址并将其发送到后端服务器.实施很简单:

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

2.-配置代理,在你的proxy.conf.js文件中放置这个,假设你的新主机在http://localhost:3000.

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.-在您的服务改变一点你的请求的路径从这个http://localhost:3000/endpoints/any/path/that/you/use这个../endpoints/any/path/that/you/use(假设另一台主机是在localhost:3000和上下文/endpoints).

5.-运行由于与根文件夹的角度: npm start ; 这 ng serve 用代理参数执行.

如果您需要更多相关信息,请检查代理以后端Angular Cli文档