Search code examples
nginxsslproxyfetchnginx-reverse-proxy

No 'Access-Control-Allow-Origin' header error, but it's available

I have created a proxy server using nginx. I installed SSL certificate using Certbot. After installing SSL, I get No 'Access-Control-Allow-Origin' header error on the frontend. I added the add_header 'Access-Control-Allow-Origin' '*' command to .conf file. But I keep getting the same error.

Error: Access to fetch at 'https://api.mywebsite.com/api/users' from origin 'https://panel.mywebsite.com' has been blocked by CORS policy: No 'Access-Control-Allow-Origin' header is present on the requested resource. If an opaque response serves your needs, set the request's mode to 'no-cors' to fetch the resource with CORS disabled.

my frontend website: https://panel.mywebsite.com my backend website: https://api.mywebsite.com

#/etc/nginx/sites-enabled/api.mywebsite.com

server {

    server_name api.mywebsite.com;
    add_header Access-Control-Allow-Origin https://panel.mywebsite.com;

    location / {
            proxy_pass http://localhost:1337;
            proxy_set_header X-Real-IP $remote_addr;
            proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
            proxy_redirect off;
     }

    listen [::]:443 ssl; # managed by Certbot
    listen 443 ssl; # managed by Certbot
    ssl_certificate /etc/letsencrypt/live/api.mywebsite.com/fullchain.pem; # managed by Certbot
    ssl_certificate_key /etc/letsencrypt/live/api.mywebsite.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

}
server {
    if ($host = api.mywebsite.com) {
        return 301 https://$host$request_uri;
    } # managed by Certbot


    listen 80;
    listen [::]:80;

    server_name api.mywebsite.com;
    return 404; # managed by Certbot


}

#/etc/nginx/sites-enabled/panel.mywebsite.com

server {

    server_name panel.mywebsite.com;

    location / {
            proxy_pass http://127.0.0.1:3000;
            proxy_set_header Host $host;
            proxy_set_header X-Real-IP $remote_addr;
            proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
            proxy_redirect off;
     }


    listen [::]:443 ssl; # managed by Certbot
    listen 443 ssl; # managed by Certbot
    ssl_certificate /etc/letsencrypt/live/panel.mywebsite.com/fullchain.pem; # managed by Certbot
    ssl_certificate_key /etc/letsencrypt/live/panel.mywebsite.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

}
server {
    if ($host = panel.mywebsite.com) {
        return 301 https://$host$request_uri;
    } # managed by Certbot


    listen 80;
    listen [::]:80;

    server_name panel.mywebsite.com;
    return 404; # managed by Certbot


}
Solution

  • i fixed problem. Although the CORS error occurred, when I examined the error in detail, I realized that the problem was not caused by CORS, but due to the insufficient max body size value.After increasing the client_max_body_size the problem was solved.

    413 Request Entity Too Large - File Upload Issue

    Request Entity Too Large Error