Problem connection between frontend and backend on same VPS

Question

I have done a web app and installed on VPS frontend and backend together. The frontend is on domain and the backend is on subdomain. I have a problem with connection between them, i get this error:

Access to XMLHttpRequest at 'https:// api. savoury. es/api/user/' from origin 'https: // savoury .es' has been blocked by CORS policy: No 'Access-Control-Allow-Origin' header is present on the requested resource.

these are the NGINX config files:

BACKEND:

server {
    listen 80;
    server_name api.savoury.es;
    return 301 https://$server_name$request_uri;
}

server {
    listen 443 ssl;
    server_name api.savoury.es;

    ssl_certificate /etc/letsencrypt/live/api.savoury.es/fullchain.pem;
    ssl_certificate_key /etc/letsencrypt/live/api.savoury.es/privkey.pem;

    # CORS configuration
    add_header 'Access-Control-Allow-Origin' 'https: // savoury .es' 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-Modi>
    add_header 'Access-Control-Expose-Headers' 'Content-Length,Content-Range' always;

    location / {
    proxy_pass http://localhost:3000;
    proxy_http_version 1.1;
    proxy_set_header Upgrade $http_upgrade;
    proxy_set_header Connection 'upgrade';
    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_set_header X-Forwarded-Proto $scheme;
    proxy_cache_bypass $http_upgrade;

    # CORS headers, si es necesario
    add_header 'Access-Control-Allow-Origin' 'https://savoury.es' 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-Modi>
    add_header 'Access-Control-Expose-Headers' 'Content-Length,Content-Range' always;

    if ($request_method = 'OPTIONS') {
        return 204;
    }
}

}

FRONTEND:

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


    listen 80;
    server_name savoury.es;

    # Redirigir HTTP a HTTPS
    location / {
        return 301 https://$host$request_uri;
    }


}

server {
    listen 443 ssl;
    server_name savoury.es;

    # Certificados SSL
    ssl_certificate /etc/letsencrypt/live/savoury.es/fullchain.pem; # managed by Certb>
    ssl_certificate_key /etc/letsencrypt/live/savoury.es/privkey.pem; # managed by Cer>

    # Ruta a la carpeta DIST
    root /var/www/savoryFrontend/dist;
    index index.html;

    # Manejar las rutas del frontend
    location / {
        try_files $uri $uri/ /index.html;
    }

    # Proxypass para el backend
    location /api/ {
        proxy_pass https:// api .savoury .es;
        proxy_http_version 1.1;
        proxy_set_header Upgrade $http_upgrade;
        proxy_set_header Connection 'upgrade';
        proxy_set_header Host $host;
        proxy_cache_bypass $http_upgrade;
    }

}

i expected to connect frontend (domain) and backend(subdomain)

Install the cors library from npm and import it into the main file of the backend — sumanth.js
– sumanth.js, Commented Sep 20, 2024 at 11:40
@sumanth.js there is nginx on backend, not node. Also, the config takes care of adding CORS with add_header.... — pierpy
– pierpy, Commented Sep 20, 2024 at 12:08
thanks for the answer. I tried CORS in the main file, removing it from the NGINX file but it didn't work. When i try cURL on server with localhost:3000 works correctly but if a try with the subdomain does not work — yeraki
– yeraki, Commented Sep 20, 2024 at 14:30

yeraki · Accepted Answer · 2024-09-21 07:38:16Z

in this post i get the answer:

https://es.stackoverflow.com/questions/611225/error-cors-entre-mi-api-y-frontend-como-solucionarlo

Basically this code works:

server {
    listen 80;
    server_name api.savoury.es;
    return 301 https://$server_name$request_uri;
}

server {
    listen 443 ssl;
    server_name api.savoury.es;

    ssl_certificate /etc/letsencrypt/live/api.savoury.es/fullchain.pem;
    ssl_certificate_key /etc/letsencrypt/live/api.savoury.es/privkey.pem;

    # CORS configuration
    add_header 'Access-Control-Allow-Origin' '*' always;
    add_header 'Access-Control-Allow-Methods' 'GET, POST, OPTIONS, PUT, DELETE, PATCH' always;
    add_header 'Access-Control-Allow-Headers' 'Origin, Content-Type, Accept, Authorization, token' always;
    add_header 'Access-Control-Expose-Headers' 'Content-Length, Content-Range' always;

    # Opcional: Manejo de preflight para solicitudes OPTIONS
    location / {
        if ($request_method = OPTIONS) {
            add_header 'Access-Control-Allow-Origin' '*';
            add_header 'Access-Control-Allow-Methods' 'POST, GET, DELETE, PUT, PATCH, OPTIONS';
            add_header 'Access-Control-Allow-Headers' 'token, Content-Type, Authorization';
            add_header 'Access-Control-Max-Age' 1728000;
            add_header 'Content-Length' 0;
            add_header 'Content-Type' 'text/plain; charset=UTF-8';
            return 204;
        }

        proxy_pass http://localhost: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_set_header X-Forwarded-Proto $scheme;
    }
}

Collectives™ on Stack Overflow

Problem connection between frontend and backend on same VPS

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related