Angular 2中的访问控制允许来源问题 [英] Access Control Allow Origin issue in Angular 2

问题描述

我在从我的 node.js 服务器获取数据时遇到问题.

客户端是:

 public getTestLines() : Observable

在服务器端我还设置了标题:

resp.setHeader('Access-Control-Allow-Origin','*')resp.send(JSON.stringify(结果))

但我得到一个错误

<块引用>

XMLHttpRequest 无法加载 http://localhost:3003/get_testlines.对预检请求的响应未通过访问控制检查:否请求中存在Access-Control-Allow-Origin"标头资源.因此，来源 'http://localhost:3000' 是不允许的访问."

我该如何解决?当我删除标题时，它说这个标题是必需的.

解决方案

Access-Control-Allow-Origin 是 response 标头，而不是请求标头.

您需要让它出现在响应中，而不是请求中.

您已尝试将其放在响应中:

<块引用>

resp.setHeader('Access-Control-Allow-Origin','*')

……但它没有奏效.

这可能是因为你没有把它放在对正确请求的响应中.错误消息说:

<块引用>

对预检请求的响应未通过访问控制检查

您已完成某事 以使请求预检.这意味着在浏览器发出您尝试发出的 GET 请求之前，它正在发出 OPTIONS 请求.

这可能是由服务器上的另一段代码处理的，因此 resp.setHeader('Access-Control-Allow-Origin','*') 行不是被击中.

导致发出预检请求的一件事是添加请求标头(除了少数例外).将 Access-Control-Allow-Origin 添加到 request 将触发预检请求，因此尝试解决问题的第一件事是 remove Access-Control-Allow-Origin 来自请求.

如果失败，那么您需要设置您的服务器，以便它可以响应 OPTIONS 请求以及 GET 请求.

I have a problem with getting data from my node.js server.

The client side is:

    public getTestLines() : Observable<TestLine[]> {
    let headers = new Headers({ 'Access-Control-Allow-Origin': '*' });
    let options = new RequestOptions({ headers: headers });

    return this.http.get('http://localhost:3003/get_testlines', options)
                .map((res:Response) => res.json())
                .catch((error:any) => Observable.throw(error.json().error || 'Server error')); 
}

in server side I also set the headers:

resp.setHeader('Access-Control-Allow-Origin','*') 
resp.send(JSON.stringify(results))

But I get an error

"XMLHttpRequest cannot load http://localhost:3003/get_testlines. Response to preflight request doesn't pass access control check: No 'Access-Control-Allow-Origin' header is present on the requested resource. Origin 'http://localhost:3000' is therefore not allowed access."

How can I fix it? When I remove headers it says that this header is required.

解决方案

Access-Control-Allow-Origin is a response header, not a request header.

You need to have it appear on the response, not the request.

You have attempted to put it on the response:

resp.setHeader('Access-Control-Allow-Origin','*') 

… but it hasn't worked.

This is probably because you haven't put it on the response to the right request. The error message says:

Response to preflight request doesn't pass access control check

You have done something to make the request preflighted. This means that before the browser makes the GET request you are trying to make, it is making an OPTIONS request.

This is, presumably, being handled by a different piece of code on your server so the line resp.setHeader('Access-Control-Allow-Origin','*') isn't being hit.

One thing that causes a preflighted request to be made is the addition of request headers (other than a small number of exceptions). Adding Access-Control-Allow-Origin to the request will trigger a preflighted request, so the first thing to do to try to fix the problem is to remove Access-Control-Allow-Origin from the request.

If that fails, then you need to set up your server so it can respond to the OPTIONS request as well as the GET request.

这篇关于Angular 2中的访问控制允许来源问题的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！