无法使CORS在ReactJS应用程序中使用nginx

Question

我正在尝试使用我的ReactJs应用程序在Docker中运行（不使用express）来发出post/put/patch/delete请求，但我的请求被CORS阻止了。我的后端是一个Spring Boot服务，也运行在Docker中。

错误：

xhr.js:166 OPTIONS http://<MY_LOCAL_DOCKER_BACKEND_IP>:8080/api/... 403

Access to XMLHttpRequest at 'http://<MY_LOCAL_DOCKER_BACKEND_IP>/api/...' from origin 'http://<MY_LOCAL_DOCKER_FRONTEND_IP>:8090' has been blocked by CORS policy: Response to preflight request doesn't pass access control check: No 'Access-Control-Allow-Origin' header is present on the requested resource.

server {

  listen        8090;
  server_name   <MY_LOCAL_DOCKER_FRONTEND_IP>:8090;

  access_log    /var/log/nginx/host.access.log;
  error_log /var/log/nginx/host.error.log;

  root   /usr/share/nginx/html;
  index  index.html index.htm;

  location ~* \.(?:manifest|appcache|html?|xml|json)$ {
     expires -1;
   }

  location ~* \.(?:css|js)$ {
     try_files $uri =404;
     expires 1y;
     access_log off;
     add_header Cache-Control "public";
   }

  # Any route containing a file extension (e.g. /devicesfile.js)
  location ~ ^.+\..+$ {
    try_files $uri =404;
  }

  location / {
      root /usr/share/nginx/html;
      index index.html;
      autoindex on;
      set $fallback_file /index.html;
      if ($http_accept !~ text/html) {
          set $fallback_file /null;
      }
      if ($uri ~ /$) {
          set $fallback_file /null;
      }
      try_files $uri $fallback_file;


      add_header 'Access-Control-Allow-Origin' 'http://<MY_LOCAL_DOCKER_FRONTEND_IP>:8090' always;
      add_header 'Access-Control-Allow-Methods' 'GET, POST, OPTIONS, PUT, PATCH, DELETE' always;
      add_header 'Access-Control-Allow-Headers' 'X-Requested-With,Accept,Content-Type, Origin' always;
      proxy_pass http://<MY_LOCAL_BACKEND_IP>:8080; #backend running on port 8080
      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;

  }
}

http://<MY_LOCAL_DOCKER_FRONTEND_IP>:8090/

当我尝试直接打开它（通过URL）时，不会被识别。路由到它（通过NavBar）工作良好。

编辑：也许我的Spring配置错了？我使用的是这个全局示例，它可以很好地处理GET请求。

@Configuration
@EnableWebMvc
public class WebConfig extends WebMvcConfigurerAdapter {

    @Override
    public void addCorsMappings(CorsRegistry registry) {
        registry.addMapping("/**");
    }
}

Answer 1

找到我的问题了！我的Spring Boot后端使用了错误的CORS配置。我对nginx.conf做了一些修改，并用@Alexanoid的这个答案（旧的，不是更新的）替换了Spring Boot CORS配置。我当前的nginx.conf（包括react-router支持）：

server {

  listen        8090;
  server_name   localhost;

  access_log    /var/log/nginx/host.access.log;
  error_log /var/log/nginx/host.error.log;

  root   /usr/share/nginx/html;
  index  index.html index.htm;

  location ~* \.(?:manifest|appcache|html?|xml|json)$ {
     expires -1;
   }

  location ~* \.(?:css|js)$ {
     try_files $uri =404;
     expires 1y;
     access_log off;
     add_header Cache-Control "public";
   }

  # Any route containing a file extension (e.g. /devicesfile.js)
  location ~ ^.+\..+$ {
    try_files $uri =404;
  }

  location / {
      root /usr/share/nginx/html;
      index index.html;
      autoindex on;
      set $fallback_file /index.html;
      if ($http_accept !~ text/html) {
          set $fallback_file /null;
      }
      if ($uri ~ /$) {
          set $fallback_file /null;
      }
      try_files $uri $fallback_file;

      if ($request_method = 'OPTIONS') {
          add_header 'Access-Control-Allow-Origin: $http_origin');
          add_header 'Access-Control-Allow-Origin: GET, POST, DELETE, PUT, PATCH, OPTIONS');
          add_header 'Access-Control-Allow-Credentials: true');
          add_header 'Vary: Origin');

      }

       add_header 'Access-Control-Allow-Origin' "$http_origin" always;
       add_header 'Access-Control-Allow-Credentials' 'true' always;
       add_header 'Access-Control-Allow-Methods' 'GET, POST, PUT, PATCH, DELETE, OPTIONS' always;
       add_header 'Access-Control-Allow-Headers' 'Accept,Authorization,Cache-Control,Content-Type,DNT,If-Modified-Since,Keep-Alive,Origin,User-Agent,X-Requested-With' always;

  }
}