(继续标题中的错误消息)“因此不允许访问来源‘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 更改为允许所有 ('*') 并不能解决这个问题。
我不确定我可以提供哪些其他信息或代码来使这一点更清楚。谢谢。
最佳答案
假设您的 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 错误
关于angular - 'Access-Control-Allow-Origin' header 的值 'http://localhost:4200' 不等于提供的来源,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/53087341/