Question

我收到了这个错误：

XMLHttpRequest无法加载API_URL。请求的资源上不存在“Access-Control-Allow-Origin”标头。因此，不允许原点“http://localhost:4200”访问。

从localhost调用远程API时

。我无法访问API服务器，所以我不能在服务器端允许CORS。以下是我从Angular服务调用API的方法：

this.http.get(url)
         .map(response  => response.json())
         .subscribe(data => this.myData.push(data));

之后我想使用会员myData。在查看chrome的开发工具时，我在网络选项卡中看到了200条消息。它还显示正确的JSON响应，但我在控制台中收到上述错误，无法使用数据。

我一直在寻找如何解决这个问题。但是，修改浏览器选项和服务器设置不是一种选择。如果可能的话，我也想避免使用代理服务器。这也是我第一次使用Angular 2，所以我对事情的运作方式没有扎实的理解;所以我可能会以完全不同的方式提出请求。

我还尝试将设置Access-Control-Allow-Origin添加到我的标题中，如下所示：

let headers = new Headers();
headers.append('Access-Control-Allow-Headers', 'Access-Control-Allow-Origin');
headers.append('Access-Control-Allow-Origin', this.serverName);
this.http.get(url , {headers: headers})
    .map(response  => response.json())
    .subscribe(data => this.myData.push(data));

但是这导致了这个错误：

对预检请求的响应未通过访问控制检查：请求的资源上没有“Access-Control-Allow-Origin”标头

这次回复是空的。查看请求标头，我看不到Access-Control-Allow-Headers和Access-Control-Allow-Origin设置.append调用的值。我是否正确设置了这些标题选项？

使用jsonp而不是http也没有用，因为标题上的应用程序类型设置为json：

拒绝从API_URL执行脚本，因为它的MIME类型（'application / json'）不可执行，并且启用了严格的MIME类型检查。

如果您在细节上解释修复，我会很感激，因为我无法在网上找到任何解决方案，也许我错过了一些重要的假设或必须知道。

Answer 1

Access-Control-Allow-Origin是响应标头，而不是请求标头 你需要修复你后端的权限（我使用nodejs）。所以你必须创建包含所有必要权限的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)

Answer 2

这是因为浏览器的安全功能强制执行相同的来源。见维基百科： https://en.wikipedia.org/wiki/Same-origin_policy

所以它与Angular无关。您提到的代理服务器是解决问题的一种方法。但是，您无法阻止浏览器执行此规则，也不应该尝试。

Angular 2请求的资源上没有“Access-Control-Allow-Origin”标头

2 个答案: