英文:
Getting "Multiple CORS header ‘Access-Control-Allow-Origin’ not allowed" on my Laravel API from Angular
问题
我使用Laravel开发了一个API，与Postman一起使用时运行完美，现在正在使用Angular开发其前端。
每次我发送请求到API时，我都会收到这个错误消息：跨源请求被阻止：同源策略禁止读取远程资源 http://localhost/master-fullstack/api-rest-laravel/public/api/user/update。（原因：不允许多个CORS标头‘Access-Control-Allow-Origin’）。
我已经在我的Laravel项目中正确设置了CORS：
index.php
header('Access-Control-Allow-Origin: *');
header("Access-Control-Allow-Headers: X-API-KEY, Origin, X-Requested-With, Content-Type, Accept, Access-Control-Request-Method, Authorization");
header("Access-Control-Allow-Methods: GET, POST, OPTIONS, PUT, DELETE");
header("Allow: GET, POST, OPTIONS, PUT, DELETE");
这是我在Angular项目中的设置：
user.service.ts
update(token: string, user: any) {
let json = JSON.stringify(user);
let params = "json="+json;
let headers = new HttpHeaders().set('Content-Type', 'application/x-www-form-urlencoded').set('Authorization', token);
return this._http.put(this.url + 'user/update', params, {headers: headers});
}
看起来问题似乎是关于具有多个Access-Control-Allow-Origin标头，但我只有一个，因为如果我删除它，我会收到另一个错误：CORS标头‘Access-Control-Allow-Origin’丢失
我还尝试过用http://localhost:4200替换*，但问题仍然存在！
我不明白发生了什么。
谢谢。
已解决！我不得不将此代码添加到httpd.conf。
<IfModule mod_headers.c>
Header set Access-Control-Allow-Origin "*"
</IfModule>
然后，我在Apache上启用了headers模块（WampServer -> Apache -> Apache Modules -> headers_module）。
英文:
I've developed an API with Laravel which worked perfect with Postman, and I'm now developing its front-end with Angular.
I'm currently getting this error each time I send a request to the API: Cross-Origin Request Blocked: The Same Origin Policy disallows reading the remote resource at http://localhost/master-fullstack/api-rest-laravel/public/api/user/update. (Reason: Multiple CORS header ‘Access-Control-Allow-Origin’ not allowed).
I already have set CORS properly in my laravel project:
index.php
header('Access-Control-Allow-Origin: *');
header("Access-Control-Allow-Headers: X-API-KEY, Origin, X-Requested-With, Content-Type, Accept, Access-Control-Request-Method, Authorization");
header("Access-Control-Allow-Methods: GET, POST, OPTIONS, PUT, DELETE");
header("Allow: GET, POST, OPTIONS, PUT, DELETE");
This is what I have in my Angular project:
user.service.ts
update(token: string, user: any) {
let json = JSON.stringify(user);
let params = "json="+json;
let headers = new HttpHeaders().set('Content-Type', 'application/x-www-form-urlencoded').set('Authorization', token);
return this._http.put(this.url + 'user/update', params, {headers: headers});
}
It looks like the issue is about having multiple Access-Control-Allow-Origin headers, but I just have one, because if I remove it, I get this another error: CORS header ‘Access-Control-Allow-Origin’ missing
I have also tried replacing * for http://localhost:4200, but the issue still persists!
I don't understand what's going on.
Thanks.
Fixed! I've had to add this code to httpd.conf.
<IfModule mod_headers.c>
Header set Access-Control-Allow-Origin "*"
</IfModule>
And then, I've enabled headers module on Apache (WampServer -> Apache -> Apache Modules -> headers_module).
答案1
得分: 1
你需要将以下内容添加到你的请求头中：
"Accept": "application/json"
英文:
you have to add
"Accept": "application/json"
to your request headers
通过集体智慧和协作来改善编程学习和解决问题的方式。致力于成为全球开发者共同参与的知识库，让每个人都能够通过互相帮助和分享经验来进步。
评论