NGINX 通过后端阻止了前端的请求，前端位于同一域但端口不同

Question

我在云上构建了一个以node.js后端和vue作为前端的Web应用程序，通过使用nginx，后端和前端都在80端口（后端）和8080端口（Web前端）中提供服务。在后端，nginx会将请求从80端口代理到3000端口到node.js。

在测试中，Web 前端收到了 CORS

Access to XMLHttpRequest at `'http://app.xxx.com/api/v1/data/api/66cbdffaa897e430f375799d' from origin` 
'http://app.xxx.com:8080' has been blocked by CORS policy: Response to preflight request doesn't pass access control check: It does not have HTTP ok status.

一开始我以为这个CORS控制发生在node.js这边，但是在node.js服务器上并没有发现什么问题。然后我关闭了node.js服务器，仍然发现CORS问题，很可能是nginx通过CORS阻止了请求。

这是 nginx 站点配置

 server {

        listen 80 default_server;
        listen [::]:80 default_server;
       # Default server configuration
         server_name http://app.xxx.com;
         location / {

              proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
              proxy_set_header Host $http_host;
              proxy_set_header X-Forwarded-Proto $scheme;
              proxy_pass http://127.0.0.1:3000; # SSL configuration
         }

         access_log /var/log/nginx/node-app-access.log;
         error_log /var/log/nginx/node-app-error.log;
 }

然后我通过注释整个后端配置部分来禁用这种配置，并重新启动 nginx 服务器。

不再出现 CORS 错误，而是请求失败错误

   GET http://app.xxx.com/api/v1/data/api/66cbdffaa897e430f375799d net::ERR_CONNECTION_REFUSED

所以我或多或少可以确认CORS错误来自nginx，但我以前从未见过它发生，因为大多数CORS错误通常在node.js服务器端而不是在nginx端。更不用说，前端和后端都在同一个域但不同的端口。

我按照一些教程将标头添加到 nginx 配置中，如下所示。

 server {

        listen 80 default_server;
        listen [::]:80 default_server;
       # Default server configuration
         server_name http://app.kuangcc.com;
         location / {
             add_header 'Access-Control-Allow-Origin' '*' always;
             add_header 'Access-Control-Allow-Methods' 'GET, POST, OPTIONS' always;
             add_header 'Access-Control-Allow-Headers' 'DNT,User-Agent,X-Requested-With,If-Modified-Since,Cache-Control,Content-Type,Range' always;
             add_header 'Access-Control-Expose-Headers' 'Content-Length,Content-Range' always;


              proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
              proxy_set_header Host $http_host;
              proxy_set_header X-Forwarded-Proto $scheme;
              proxy_pass http://127.0.0.1:3000; # SSL configuration
         }

         access_log /var/log/nginx/node-app-access.log;
         error_log /var/log/nginx/node-app-error.log;
 }

但还是不行，有什么想法吗

Answer 1

阅读this了解什么是CROS。
并将您的配置更改为：

server {
  listen 80 default_server;
  listen [::]:80 default_server;
  # Default server configuration
  server_name http://app.kuangcc.com;
  location / {
    add_header 'Access-Control-Allow-Origin' '*' always;
    add_header 'Access-Control-Allow-Methods' 'GET, POST, OPTIONS' always;
    add_header 'Access-Control-Allow-Headers' 'DNT,User-Agent,X-Requested-With,If-Modified-Since,Cache-Control,Content-Type,Range' always;
    add_header 'Access-Control-Expose-Headers' 'Content-Length,Content-Range' always;

    proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
    proxy_set_header Host $http_host;
    proxy_set_header X-Forwarded-Proto $scheme;
    proxy_pass http://127.0.0.1:8080;
  }
  
  location /api/ {
    add_header 'Access-Control-Allow-Origin' '*' always;
    add_header 'Access-Control-Allow-Methods' 'GET, POST, OPTIONS' always;
    add_header 'Access-Control-Allow-Headers' 'DNT,User-Agent,X-Requested-With,If-Modified-Since,Cache-Control,Content-Type,Range' always;
    add_header 'Access-Control-Expose-Headers' 'Content-Length,Content-Range' always;

    proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
    proxy_set_header Host $http_host;
    proxy_set_header X-Forwarded-Proto $scheme;
    proxy_pass http://127.0.0.1:3000; # SSL configuration
  }

  access_log /var/log/nginx/node-app-access.log;
  error_log /var/log/nginx/node-app-error.log;
}

对前端和后端的请求均使用80端口。