运行angular-cli服务时如何指定'Access-Control-Allow-Origin'

Question

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

问题是当调用 System.import() 时，浏览器抱怨 CORS： XMLHttpRequest 无法加载 http://localhost:4200/system-config.js. No 'Access-Control-Allow-Origin' header is present on the requested resource. Origin 'http://localhost:8080' 因此不允许访问。 zone.js:323 错误：错误：加载 XHR 错误 http://localhost:4200/system-config.js(…)

如何配置 angular-cli 以设置 'Access-Control-Allow-Origin' header 以便浏览器不会呕吐。

Answer 1

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

Answer 2

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

npm install ember-cli-cors -D

Answer 3

您可以添加 proxy 配置。它将 'proxy' 请求到您服务器的域。

Answer 4

FWIW，

CORS 现已在 angular CLI 中启用。 Out-of-the-box，Access-Control-Allow-Origin header 设置为 *。不确定它是什么时候发布的，但可以肯定 1.0.0 并且后来启用了它。

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

Answer 5

在非常相似的设置中，事实证明基于 Chrome 的浏览器不支持本地主机地址的 CORS。参见

Answer 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服务时如何指定'Access-Control-Allow-Origin'

How to specify 'Access-Control-Allow-Origin' when running angular-cli serve

angular-cli