16

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

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

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

4

6 回答 6

3

FWIW，

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

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

于 2017-05-09T00:19:41.990 回答
1

我只花了大约 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/

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

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

于 2018-01-02T07:13:33.930 回答
1

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

于 2016-05-18T01:26:38.907 回答
1

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

于 2017-05-26T09:58:18.503 回答
0

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

于 2016-11-04T07:25:54.583 回答
-1

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

npm install ember-cli-cors -D
于 2016-05-18T22:19:42.847 回答