angular - 'Access-Control-Allow-Origin' header 的值 'http://localhost:4200' 不等于提供的来源

Question

(继续标题中的错误消息)“因此不允许访问来源‘http://127.0.0.1:4200’。”

当使用相同的 API 时，我无法在两个不同的域上运行相同的 Angular 5 站点。

此错误消息来自 Chrome。 Firefox 中的错误是:

跨源请求被阻止:同源策略不允许读取位于 http://myapitest.local/v1/subscription/current/products 的远程资源. (原因:CORS header ‘Access-Control-Allow-Origin’与‘http://127.0.0.1:4200’不匹配)

我在开发我们的 Angular 应用程序的白标版本时注意到了这一点，该版本将在我们常规应用程序的替代 URL 上运行，但仍然使用在同一 URL 上运行的相同 Laravel api。我已将适当的 CORS 配置添加到 Laravel，这似乎是浏览器问题 - 不确定如何解决它。

例如，我通过从 localhost:4200 更改为 127.0.0.1:4200 在 localhost 重新创建了它。

奇怪的是，使用正确的 CORS header ，预检似乎是成功的。

但是，在 GET 上，它似乎在响应中返回错误的 Access-Control-Allow-Origin header 。

这里值得注意的是，将我在 API 中的 Allowed Origins 更改为允许所有 ('*') 并不能解决这个问题。

我不确定我可以提供哪些其他信息或代码来使这一点更清楚。谢谢。

Answer 1

假设您的 api 在 8080 上运行，而您的 Angular 代码在 4200 上运行。

在你的 Angular 应用中创建一个名为 proxy.conf.json 的文件

{
    "/api/": {
        "target": "http://localhost:8080/",
        "secure": false,
        "changeOrigin": true
    }
}

使用此命令启动 Angular 应用程序

ng serve --port 4200 --proxy-config proxy.conf.json

使用此配置，当您调用 localhost:4200/api 时，您将调用 8080，并且不会有任何 CORS 错误