Symfony 4.1-CORS问题 [英] Symfony 4.1 - CORS issue
问题描述
我的symfony 4.1 API有一些问题:
I have some issue with my symfony 4.1 API:
我正在使用带有角度的httpclient的离子应用程序来使用我的API.
I'm consuming my API through a ionic application using angular httpclient.
我的问题是CORS标头，尤其是Access-Control-Allow-Methods
My problem is with the CORS headers especially Access-Control-Allow-Methods
我的CORS遇到了问题，因为我的API和应用程序的来源不同，这导致我的安装nelmio/cors-bundle可以处理CORS.
I've had problems with CORS since my API and my application aren't on the same origin which made my install nelmio/cors-bundle to handle CORS.
我的nelmio_cors.yaml如下:
nelmio_cors:
paths:
'^/api/':
origin_regex: true
allow_origin: ['*']
allow_methods: ['GET', 'OPTIONS', 'POST', 'PUT', 'PATCH', 'DELETE']
allow_headers: ['Content-Type', 'Authorization']
max_age: 3600
这实际上适用于我从那时起使用的所有方法:
This actually works for all the methods i was using since then:
- 发布请求[确定]
- 获取请求[确定]
- 删除请求[确定]
现在，我想向我的API添加PATCH路由.我已经用Postman测试了控制器，我的工作像个魅力.现在，当我从角度服务查询相同的路线时:
Now i wanted to add a PATCH route to my API. I've testing the controller with Postman and i works like a charm. Now when i query the same route from my angular service :
return this.http.patch(this.url + '/api/users/' + userId,
dataToPatch,
this.authHeaders)
.map(response => response.json());
控制台记录以下内容:
Failed to load http://symfony.local/api/users/1: Method PATCH is not allowed by Access-Control-Allow-Methods in preflight response.
在这里您可以看到请求的响应标头:
Here you can see the response headers of the request:
Access-Control-Allow-Headers: authorization,content-type
Access-Control-Allow-Methods: POST, GET, OPTIONS, PUT, DELETE
Access-Control-Allow-Origin: *
Access-Control-Max-Age: 3600
Allow: POST, GET, OPTIONS, PUT, DELETE
Cache-Control: no-cache, private
Connection: keep-alive
Content-Encoding: gzip
Content-Type: text/html; charset=UTF-8
Date: Tue, 06 Nov 2018 14:02:51 GMT
Server: nginx
Transfer-Encoding: chunked
X-Powered-By: PHP/7.2.11
如您所见，如果我正确理解CORS标头，则不允许使用PATCH方法，但是为什么当使用postman来使用API时，它为什么能起作用.
As you can see and if i understand CORS headers correctly, PATCH methods aren't allowed but then why does it works when using postman to consume the API.
我还安装了chrome的Allow-Control-Allow-Origin:*扩展程序，但在那里也没有成功...
I've also installed chrome's Allow-Control-Allow-Origin:* extension but no success there aswell...
我正在使用 https://github.com/ikamikaz3/docker-symfony 就像我的筹码可以从那里来吗? (可能在某处配置错误?)
I'm using https://github.com/ikamikaz3/docker-symfony as my stack could it come from there ? (misconfiguration somewhere maybe?)
如果需要，我可以提供更多代码，但这对我来说似乎是一个愚蠢的错误...
I can provide more code if required but it seems like a stupid mistake to me...
从chrome卸载Allow-Control-Allow-Origin:*后，我在登录时得到以下提示
After uninstalling Allow-Control-Allow-Origin:* from chrome i get the following on login
Failed to load http://symfony.local/login_check: Response to preflight request doesn't pass access control check: The 'Access-Control-Allow-Origin' header has a value 'null' that is not equal to the supplied origin. Origin 'http://localhost:8100' is therefore not allowed access.
在我的nginx容器中使用以下内容更新了我的symfony.conf之后，我设法使API正常工作，虽然PATCH仍然损坏，但我认为我可以做到<3
After updating my symfony.conf with the following inside my nginx container, i managed to get the API to work, PATCH still broken tho but i think i can do it <3
if ($request_method = 'OPTIONS') {
add_header 'Access-Control-Allow-Origin' '*';
add_header 'Access-Control-Allow-Methods' 'GET, POST, OPTIONS';
#
# Custom headers and headers various browsers *should* be OK with but aren't
#
add_header 'Access-Control-Allow-Headers' 'DNT,User-Agent,X-Requested-With,If-Modified-Since,Cache-Control,Content-Type,Range,Authorization';
#
# Tell client that this pre-flight info is valid for 20 days
#
add_header 'Access-Control-Max-Age' 1728000;
add_header 'Content-Type' 'text/plain; charset=utf-8';
add_header 'Content-Length' 0;
return 204;
}
if ($request_method = 'POST') {
add_header 'Access-Control-Allow-Origin' '*';
add_header 'Access-Control-Allow-Methods' 'GET, POST, OPTIONS';
add_header 'Access-Control-Allow-Headers' 'DNT,User-Agent,X-Requested-With,If-Modified-Since,Cache-Control,Content-Type,Range,Authorization';
add_header 'Access-Control-Expose-Headers' 'Content-Length,Content-Range';
}
if ($request_method = 'GET') {
add_header 'Access-Control-Allow-Origin' '*';
add_header 'Access-Control-Allow-Methods' 'GET, POST, OPTIONS';
add_header 'Access-Control-Allow-Headers' 'DNT,User-Agent,X-Requested-With,If-Modified-Since,Cache-Control,Content-Type,Range,Authorization';
add_header 'Access-Control-Expose-Headers' 'Content-Length,Content-Range';
}
推荐答案
我设法使它起作用，所以这是我的参考方法:
I've managed to get this to work so here's how i did it for reference:
-
删除nelmio/cors-bundle(因为我们直接使用NGINX处理CORS)，因为它引起了类似2 Allow-Control-Allow-Origin标头字段的冲突.
Remove nelmio/cors-bundle (since we handle CORS directly with NGINX), because it caused conflits like 2 Allow-Control-Allow-Origin header field.
在nginx.conf中添加我想要的方法(其余配置与我的原始帖子一样)
Add the methods i want in nginx.conf (with the rest of the config as in my original post)
if ($request_method = 'OPTIONS') {
add_header 'Access-Control-Allow-Methods' 'HTTP_VERBS, SEPARATED, WITH, COMMAS';
if ($request_method = 'OPTIONS') {
add_header 'Access-Control-Allow-Methods' 'HTTP_VERBS, SEPARATED, WITH, COMMAS';
重建我的docker堆栈docker-compose build
Rebuild my docker stack docker-compose build
You can find my fork of maxpou's docker-symfony for more in depth informations (config files etc...) at http://github.com/ikamikaz3/docker-symfony which contains an Symfony flex stack with ELK/Kibana, PhpMyAdmin (WIP), and now NGINX with CORS support !!
这篇关于Symfony 4.1-CORS问题的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
