CORS issue

Majorly encountered when webapps connect to zus network.

There are 2 ways to fix this issue.

1. Nginx configuration

Add below preflight condition inside every server location.

# Preflight request. Reply successfully:
if ($request_method = 'OPTIONS') {
    add_header 'Access-Control-Max-Age' 1728000; # cache preflight value for 20 days
    add_header 'Content-Type' 'text/plain charset=UTF-8';
    add_header 'Access-Control-Allow-Origin' '*' always;
    add_header 'Access-Control-Allow-Methods' 'GET, POST, DELETE, OPTIONS' always;
    add_header 'Access-Control-Allow-Headers' '*' always;
    add_header 'Content-Length' 0;
    return 204;
}

For example:

server {
        server_name portainer.dev1.zus.network;
        location / {
                proxy_set_header Host $host;
                proxy_set_header X-Real-IP $remote_addr;
                proxy_pass http://localhost:9000/;
                proxy_set_header Connection $http_connection;
                proxy_set_header Upgrade $http_upgrade;
                proxy_set_header Connection "upgrade";

                # Preflight request. Reply successfully:
                if ($request_method = 'OPTIONS') {
                    add_header 'Access-Control-Max-Age' 1728000; # cache preflight value for 20 days
                    add_header 'Content-Type' 'text/plain charset=UTF-8';
                    add_header 'Access-Control-Allow-Origin' '*' always;
                    add_header 'Access-Control-Allow-Methods' 'GET, POST, DELETE, OPTIONS' always;
                    add_header 'Access-Control-Allow-Headers' '*' always;
                    add_header 'Content-Length' 0;
                    return 204;
                }
        }
}

2. Proxy URL

Proxy url can be used anywhere to fix the cors issue.