Angular 2请求的资源上不存在“Access-Control-Allow-Origin”标头[重复]

Posted 2023-03-04

【中文标题】Angular 2请求的资源上不存在“Access-Control-Allow-Origin”标头[重复]

【英文标题】：Angular 2 No 'Access-Control-Allow-Origin' header is present on the requested resource [duplicate]

【发布时间】：2017-11-20 22:35:45

【问题描述】：

我收到此错误：

XMLHttpRequest 无法加载 API_URL。请求的资源上不存在“Access-Control-Allow-Origin”标头。 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 类型检查。

如果您详细解释修复方法，我将不胜感激，因为我无法在网络上遵循任何解决方案，也许我错过了一些重要的假设或必须知道的。

【问题讨论】：

如果您想从前端 javascript 代码发出请求，您唯一的选择是使用 CORS 代理，如 ***.com/questions/20035101/… 中所述。否则，您需要改为从后端代码发出请求。尝试以您正在做的方式从客户端设置 Access-Control-* 标头的原因是，这些标头是必须从服务器端发送的 response 标头，不请求您可以从客户端发送的标头。

@sideshowbarker 解释了奇怪的标题行为。

【参考方案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)

【参考方案2】：

这是由于浏览器的安全功能强制执行相同的来源。参见***： https://en.wikipedia.org/wiki/Same-origin_policy

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

【讨论】：

嗨 Rob，欢迎来到 SE。您的回答不是问题的解决方案，而只是有关情况的额外信息。这些类型的答案应作为 cmets 发布。