'Access-Control-Allow-Origin'标头的值为'http:// localhost:4200',它不等于提供的来源

Question

(标题中的错误消息的继续)因此不允许"Origin" http://127.0.0.1:4200 '访问."

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

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

跨源请求已阻止:同源策略禁止在http://myapitest.local/v1/subscription/current/products中读取远程资源.(原因:CORS标题'Access-Control-Allow-Origin'与' http://127.0.0.1:4200 ' 不匹配)

我在使用白色标签版本的Angular应用程序时注意到这一点,该应用程序将在常规应用程序的备用URL上运行,但仍使用在同一URL上运行的相同Laravel api.我已经为Laravel添加了适当的CORS配置,这似乎是一个浏览器问题 - 不知道如何解决它.

我已经在localhost中重新创建了这个,例如从localhost:4200更改为127.0.0.1:4200.

奇怪的是,使用正确的CORS标头,预检似乎是成功的.

但是,在GET上,似乎在响应中返回错误的Access-Control-Allow-Origin标头.

值得注意的是,在API中更改我的允许来源以允许所有('*')不能解决此问题.

我不确定我能提供哪些其他信息或代码来使其更清晰.谢谢.

Answer 1

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

在您的角度应用程序中创建一个名为proxy.conf.json的文件

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

使用此命令启动角度应用

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

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

Answer 2

将其添加到您的public/index.php文件中

header('Access-Control-Allow-Origin: *');