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

问题描述

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

客户端是：

  public getTestLines（）：Observable< TestLine []> {
 let headers = new Headers（{'Access-Control-Allow-Origin'：'*'}）; 
 let options = new RequestOptions（{headers：headers}）; 
 
返回this.http.get（'http：// localhost：3003 / get_testlines'，options）
 .map（（res：Response）=> res.json（）） 
 .catch（（error：any）=> Observable.throw（error.json（）。error ||'Server 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 会触发一个预检请求，所以要尝试解决问题的第一件事是从请求中移除 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屋！