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

问题描述

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

客户端是:

 public getTestLines() : Observable{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 || '服务器错误'));}

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

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

但我收到一个错误

<块引用>

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

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

解决方案

Access-Control-Allow-Origin 是一个响应标头，而不是一个请求标头.

您需要将其显示在响应中，而不是请求中.

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

<块引用>

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

...但它没有用.

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

<块引用>

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

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

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

导致发出预检请求的一件事是添加请求标头(少数例外除外).将 Access-Control-Allow-Origin 添加到 request 将触发预检请求，因此尝试解决问题的第一件事是删除 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 中的访问控制允许 Origin 问题的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！