Angular 2 Typescript - 启用 CORS 标头“Access-Control-Allow-Origin”

Posted 2023-02-27

【中文标题】Angular 2 Typescript - 启用 CORS 标头“Access-Control-Allow-Origin”

【英文标题】：Angular 2 Typescript - Enable CORS header ‘Access-Control-Allow-Origin’

【发布时间】：2018-02-02 12:32:35

【问题描述】：

我的本​​地主机上运行着 Angular 2 typescript 应用程序。我必须在我的应用程序中访问外部 REST API。每当我尝试访问时，我都会收到此错误

跨域请求被阻止：同源策略不允许读取 *** 的远程资源。 （原因：CORS 标头 'Access-Control-Allow-Origin' 缺失）。

解决此问题的最佳解决方案是什么。我不想使用任何插件/插件。 我不认为这个包适用于 Angular 2 Typescript 应用程序。它用于 express.js

npm install cors --save 

如何使用 typescript 为整个项目/应用程序设置此 CORS 标头“Access-Control-Allow-Origin”？我需要在下面的代码中在哪里添加此标头？

var request = new XMLHttpRequest();
   let myurl='http://remoteIP/api';
request.open('GET', myurl, true);
request.responseType = 'blob';
request.onload = function() 
    var reader = new FileReader();
    reader.readAsDataURL(request.response);
    reader.onload = (e) => 
        console.log('DataURL:', reader.result);
    ;
;
request.send();

【问题讨论】：

此标头需要在服务器端添加，而不是在客户端 TypeScript 代码中。

@RayToal 如何在服务器端添加？

这取决于您使用的服务器技术。您提出问题的方式听起来像是您正在访问您无法控制的其他人的外部 REST API。如果您自己编写服务器，则可以将 Access-Control-Allow-Origin 标头添加到需要它的响应（即通过 Ajax 调用访问的响应）。

@RayToal 服务器是 Jenkins 服务器。我正在尝试访问 Jenkins Rest API，例如http://ci.jruby.org/job/jruby-base/lastSuccessfulBuild/ 在我的 Angular 打字稿应用程序中。 Angular 应用程序在我的本地主机上。这是我遇到 CORS 问题的时候。

This Jenkins Plugin 可能会帮助你

【参考方案1】：

承载该 API 的服务器 需要启用 CORS。这是客户端语言的限制——它们通过浏览器发出这些 REST 请求。浏览器会将您提供的任何模拟原始标头更改为实际网站的标头。

这不是服务器端语言的问题，例如 php 甚至 nodeJS/expressJS。

【讨论】：

如果我可以访问服务器，如何在该服务器上启用 CORS？

@JeffHuijsmans ***.com/questions/7067966/how-to-allow-cors - 这是针对 node.js/express.js...我必须在服务器端运行这个脚本？

不行，先看看你运行的是什么类型的服务器。如果是 Apache，请在此网站上搜索“CORS apache”。如果是nginx，在本站搜索“CORS nginx”等

@JeffHuijsmans 这是一个运行 Jenkins 的 ubuntu 服务器。我正在尝试在我的 Angular 应用程序中访问 Jenkins Rest API。

@JeffHuijsmans 非常感谢。它有助于解决问题。我安装了 CORS 插件。