运行 angular-cli serve 时如何指定“Access-Control-Allow-Origin”

Posted 2023-02-25

【中文标题】运行 angular-cli serve 时如何指定“Access-Control-Allow-Origin”

【英文标题】：How to specify 'Access-Control-Allow-Origin' when running angular-cli serve

【发布时间】：2016-09-13 23:03:50

【问题描述】：

我正在运行一个 Spring API 服务器和一个 Angular-cli 服务器来提供我的静态内容。在生产中，我们将使用 CDN，但对于开发来说，前端和后端服务器都在我的本地机器上的不同端口上运行。 Spring 服务器提供初始 html 页面，然后其余的 JS、CSS 和 html 来自 angular-cli/CDN。

问题是当调用 System.import() 时，浏览器会抱怨 CORS： XMLHttpRequest 无法加载 http://localhost:4200/system-config.js。请求的资源上不存在“Access-Control-Allow-Origin”标头。因此，Origin 'http://localhost:8080' 不允许访问。 zone.js:323 错误：错误：XHR 错误加载http://localhost:4200/system-config.js(…)

如何配置 angular-cli 以设置“Access-Control-Allow-Origin”标头，这样浏览器就不会吐了。

【问题讨论】：

我正在考虑创建某种“代理”来在开发期间将请求来回发送到 API 服务器，但我也对不那么臭的东西感兴趣......

【参考方案1】：

支持 CORS 的配置在服务器内完成，您需要更新 Spring API 以允许来自 CLI 应用程序的请求，该应用程序默认托管在端口 4200 上。

【参考方案2】：

我实际上通过使用ember-cli-cors 插件解决了这个问题。您所要做的就是使用 ng 命令安装它，如下所示：

npm install ember-cli-cors -D

【讨论】：

看起来所做的只是在 package.json devDependencies 中为“ember-cli-cors”安装 npm 包。 ng serve安装后怎么知道？感觉我必须导入它或将其添加到 system-config.ts ？

指定的命令安装无效。有关可用选项，请参阅ng help。

正确的命令应该是npm install ember-cli-cors。

【参考方案3】：

您可以添加proxy 配置。它会将请求“代理”到您服务器的域。

【讨论】：

就我而言，此解决方案不发送 POST 有效负载。有什么想法吗？

【参考方案4】：

FWIW，

CORS 现已在 Angular CLI 中启用。开箱即用，Access-Control-Allow-Origin 标头设置为*。 不确定它是什么时候发布的，但肯定是1.0.0 并且后来启用了它。

与所有 CORS 问题一样，您的 API 服务器也需要配置为接受 CORS。

【参考方案5】：

在一个非常相似的设置中，基于 Chrome 的浏览器不支持本地地址的 CORS。见https://***.com/a/10892392/661414

【参考方案6】：

我只花了大约 20 个小时试图解决这个问题并阅读了许多帖子。快速的答案是，修改服务器 CORS 处理并避免 glassfish。以下代码适用于 tom ee（可能还有其他），但不适用于 glassfish。

@Provider
public class NewCrossOriginResourceSharingFilter implements ContainerResponseFilter 

@Override
public void filter(ContainerRequestContext requestContext, ContainerResponseContext response) 
    response.getHeaders().putSingle("Access-Control-Allow-Origin", "*");
    response.getHeaders().putSingle("Access-Control-Allow-Methods", "GET, POST, PUT, DELETE");
    response.getHeaders().putSingle("Access-Control-Allow-Headers", "Content-Type");

通过逐行分割代码，我发现添加“Access-Control-Allow-Headers”调用会导致 glassfish 出现异常，从而导致内部服务器错误 (500)。显然这个异常已经存在了一年多，而且没有修复的迹象。

我一直无法让代理配置解决方案正常工作。我会看到调试器消息的效果是

/api/path/users => http:localhost:8080/

代理过滤器似乎截断了任何尾随路径或查询参数。

我希望这可以节省很多时间。

【讨论】：

不错的信息，但与 angular cli "serve" 命令完全无关