Nginx : blocked by CORS policy: The 'Access-Control-Allow-Origin' header contains multiple values

Question

I needs to enable cors policy to reach to my api, i did the following configuration on my nginx server file:

server {
    listen 80 default_server;
    listen [::]:80 default_server;

    server_name api.domain.com;

    location / {

       proxy_set_header X-Real-IP $remote_addr;
       proxy_set_header Host $host;
       proxy_pass http://my_ip:6869/;

        set $ref "*";
        if ($http_referer ~* ^(http?\:\/\/)(.*?)\/(.*)$) {
          set $ref $1$2;
        }
        add_header 'Access-Control-Allow-Origin' $ref always;
        add_header 'Access-Control-Allow-Credentials' 'true' always;
        add_header 'Access-Control-Allow-Methods' 'GET, POST, OPTIONS, PUT, DELETE' always;
        add_header 'Access-Control-Allow-Headers' 'DNT,User-Agent,X-Requested-With,If-Modified-Since,Cache-Control,Content-Type,Range,signature,timestamp' always;
        add_header 'Access-Control-Expose-Headers' 'Content-Length,Content-Range' always;

    }

    listen [::]:443 ssl ipv6only=on; # managed by Certbot
    listen 443 ssl; # managed by Certbot
    ssl_certificate /etc/letsencrypt/live/api.domain.com/fullchain.pem; # managed by Certbot
    ssl_certificate_key /etc/letsencrypt/live/api.domain.com/privkey.pem; # managed by Certbot
    include /etc/letsencrypt/options-ssl-nginx.conf; # managed by Certbot
    ssl_dhparam /etc/letsencrypt/ssl-dhparams.pem; # managed by Certbot

}

But i keep getting the following error:

Access to fetch at 'https://api.domain.com/data/key?matches=^art(.*)' from origin 'http://localhost:3500' has been blocked by CORS policy: The 'Access-Control-Allow-Origin' header contains multiple values '*, http://localhost:3500', but only one is allowed. Have the server send the header with a valid value, or, if an opaque response serves your needs, set the request's mode to 'no-cors' to fetch the resource with CORS disabled.

It seem that the add_header is adding on top of an already set header for Access-Control-Allow-Origin * but i only have this config file and don't see anywhere else where it could come from.

Is there a way to figure out what is setting the initial header cors policy or simply override it instead of adding to it?

Thank you in advance.

Answer 1

This happens if you haven't set up CORS configuration correctly. you can fix this on you'r local machine using a plugin/extension called Allow-Control-Allow-Origin and add you'r localhost into it.

The other way is to manually fix the configuration in server side.

if you are not familiar with CORS it basically used to allow some cross-origin requests while rejecting others. For example, if a site offers an embeddable service, it may be necessary to relax certain restrictions.

Update

Which compiler are you using for Nginx? If it's this one the following code must fix it:

location ~* \.(eot|ttf|woff|woff2)$ {
    add_header Access-Control-Allow-Origin *;
}