同一 VPS 上前端和后端之间的连接问题

Question

我做了一个网络应用程序并安装在VPS前端和后端上。前端位于域上，后端位于子域上。我的它们之间的连接有问题，我收到此错误：

通过“https:// api.xml”访问 XMLHttpRequest。咸味的。来自源 'https:// savory .es' 的 es/api/user/' 已被 CORS 策略阻止：请求的资源上不存在 'Access-Control-Allow-Origin' 标头。

这些是 NGINX 配置文件：

后端：

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;
    }
}

}

前端：

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;
    }

}

我希望连接前端（域）和后端（子域）

Answer 1

在这篇文章中我得到了答案：

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

基本上这段代码可以工作：

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;
    }
}