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＆＃39; Access-Control-Allow-Origin＆＃39;标头出现在请求的资源上。起源＆＃39; http://localhost:8080＆＃39;因此不允许访问。 zone.js：323错误：错误：加载http://localhost:4200/system-config.js（...）

时出现XHR错误

如何配置angular-cli以设置＆＃39; Access-Control-Allow-Origin＆＃39;标题所以浏览器不会呕吐。

Answer 1

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

Answer 2

我花了大约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");
}
}

通过逐行平分代码，我发现添加＆＃34; Access-Control-Allow-Headers＆＃34;调用导致glassfish中的异常导致内部服务器错误（500）。显然，例外已经存在超过一年，并且没有显示出被修复的迹象。

我从未能够使用proxy-config解决方案。我会看到调试器消息到

的效果

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

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

我希望这可以节省一些时间。

Answer 3

我实际上是通过使用ember-cli-cors添加来解决此问题的。您所要做的就是使用ng命令安装它，如下所示：

npm install ember-cli-cors -D

Answer 4

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

Answer 5

FWIW，

CORS已在角度CLI中启用。开箱即用时，Access-Control-Allow-Origin标头设置为*。不确定它何时被发布，但肯定1.0.0以及之后启用它。

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

Answer 6

在一个非常类似的设置中，结果表明基于Chrome的浏览器不支持CORS用于本地主机地址。见https://stackoverflow.com/a/10892392/661414

如何指定＆＃39; Access-Control-Allow-Origin＆＃39;当运行angular-cli服务时

6 个答案: