CORS issue with Symfony 5 on Chrome

Question

I have a Symfony 5.2 app used as an API and I'm facing a CORS issue with Nelmio CORS bundle. The app works very well for some clients (and for me) and some them are facing this CORS issue on Chrome :

'Access to XMLHttpRequest has been blocked by CORS policy' No 'Access-Control-Allow-Origin' header is present on the requested resource

What I don't understand is that it works from some devices/networks and not from others.

My CORS_ALLOW_ORIGIN env variable :

CORS_ALLOW_ORIGIN: ^https?://(www\.example.com|example.com)(:[0-9]+)?$

My nelmio_cors config file :

nelmio_cors:
  defaults:
    origin_regex: true
    allow_origin: []
    allow_methods: []
    allow_headers: []
    expose_headers: []
    max_age: 0
    hosts: []
    forced_allow_origin_value: ~
  paths:
    '^/v([0-9\.]+)/':
        origin_regex: true
        allow_origin: ['%env(CORS_ALLOW_ORIGIN)%']
        allow_methods: ['GET', 'OPTIONS', 'POST', 'PUT', 'PATCH', 'DELETE']
        allow_headers: ['Content-Type', 'Authorization', 'X-Auth-Api', 'Access-Control-Allow-Origin', 'Access-Control-Allow-Credentials']
        expose_headers: ['Link']
        max_age: 3600

I observed that the headers are sent twice, I think due to nginx configuration which conflicts with nelmio_cors :

access-control-allow-credentials: true
access-control-allow-headers: content-type, authorization, x-auth-api, access-control-allow-origin, access-control-allow-credentials
access-control-allow-headers: Accept,Authorization,Cache-Control,Content-Type,DNT,If-Modified-Since,Keep-Alive,Origin,User-Agent,X-Requested-With
access-control-allow-methods: GET, OPTIONS, POST, PUT, PATCH, DELETE
access-control-allow-methods: GET, POST, PUT, DELETE, OPTIONS
access-control-allow-origin: https://example.com

The nginx.conf located in the symfony folder :

server {
listen 80;
server_name _;
charset utf-8;
client_max_body_size 2M;
sendfile off;
root /app/public;
index index.php;
#Nginx RealIP
set_real_ip_from  0.0.0.0/0;
real_ip_header    CF-Connecting-IP;
real_ip_recursive on;
#Nginx RealIP
error_log  /dev/stderr;
access_log /dev/stdout mainup;
#add_header 'Access-Control-Allow-Origin' "$http_origin" always;
add_header 'Access-Control-Allow-Methods' 'GET, POST, PUT, DELETE, OPTIONS, PATCH' always;
add_header 'Access-Control-Allow-Headers' 'Accept,Authorization,Cache-Control,Content-Type,DNT,If-Modified-Since,Keep-Alive,Origin,User-Agent,X-Requested-With' always;
location / {
        try_files $uri $uri/ /index.php$is_args$args;
}

location ~ \.php$ {
    try_files $uri =404;
    fastcgi_split_path_info ^(.+\.php)(/.+)$;
    fastcgi_pass 127.0.0.1:9000;
    fastcgi_index index.php;
    include fastcgi_params;
    fastcgi_param SCRIPT_FILENAME $document_root$fastcgi_script_name;
    fastcgi_param PATH_INFO $fastcgi_path_info;
    fastcgi_param HTTP_HOST $host;
}

location ~ /\.(ht|svn|git) {
        deny all;
}

}

Could this be the issue ? How can I solve this ?

Answer 1

The answer must be simple, we need to understand what CORS does on the website, but basically, the application on the browser, is telling him from what website is allowing request, in this case we need to take the env variable CORS_ALLOW_ORIGIN

CORS_ALLOW_ORIGIN: ^https?://(www\.example.com|example.com)(:[0-9]+)?$

as you can see is allowing the request from the website example.com, now on the nemio.yml file:

paths:
    '^/v([0-9\.]+)/':
        origin_regex: true
        allow_origin: ['%env(CORS_ALLOW_ORIGIN)%']
        allow_methods: ['GET', 'OPTIONS', 'POST', 'PUT', 'PATCH', 'DELETE']
        allow_headers: ['Content-Type', 'Authorization', 'X-Auth-Api', 'Access-Control-Allow-Origin', 'Access-Control-Allow-Credentials']
        expose_headers: ['Link']
        max_age: 3600

se the path '^/v([0-9\.]+)/': so, on this case, we're allowing the request from example.com or www.example.com with the context of /v([0-9.]+).

See the next video will guide you about the security issue of "Access-Control-Allow-Origin", and also the documentation of the component