Angular 2 中的访问控制允许 Origin 问题

Question

我在从 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”标头。Origin ‘ http:// localhost:3000 ’ 因此不允许访问。”

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

原文由 Michal Bialek 发布，翻译遵循 CC BY-SA 4.0 许可协议

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

原文由 Quentin 发布，翻译遵循 CC BY-SA 3.0 许可协议

Answer 2

Access-Control-Allow-Origin 是一个 响应标头，而不是您需要在后端修复权限的 请求标头。因此您必须创建包含所有必要权限的 cors.js 文件。

 function crosPermission(){
  this.permission=function(req,res,next){
    res.header('Access-Control-Allow-Origin','*');
    res.header('Access-Control-Allow-Headers','Content-Type');
    res.header('Access-Control-Allow-Methods','GET','POST','PUT','DELETE','OPTIONS');
    next();
  }
}

module.exports= new crosPermission();

下一步 您需要在 app.js 中添加一些行

    var cors=require('./cors');
    app.use(cors.permission)

原文由 Bettaibi Nidhal 发布，翻译遵循 CC BY-SA 3.0 许可协议