Angular 2中的访问控制允许起源问题

小编典典

Angular 2中的访问控制允许起源问题

html

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

客户端是：

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

在服务器端，我还设置了标头：

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

但我得到一个错误

“ XMLHttpRequest无法加载http：// localhost：3003 /
get_testlines。对预检请求的响应未通过访问控制检查：所请求的资源上没有’Access-
Control-Allow-Origin’标头。来源’ http：//本地主机：3000
‘因此不允许访问。”

我该如何解决？当我删除标题时，它说此标题是必需的。

阅读 321

2020-05-10

共1个答案

小编典典

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请求。

2020-05-10