Не удается заставить CORS работать в приложении ReactJS с nginx

Question

Я пытаюсь сделать запрос POST / PUT / PATCH / DELETE, используя мое приложение ReactJs, работающее в Docker (не использующее экспресс), и мои запросы блокируются CORS. Мой бэкэнд - Spring Boot Service, также работающий в 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.

Также я использую React-Router.

Я запускаю свой веб-интерфейс на nginx, и вот как выглядит мой nginx.conf:

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 Config не так? Я использую этот глобальный пример, который прекрасно работает для запросов GET.

@Configuration
@EnableWebMvc
public class WebConfig extends WebMvcConfigurerAdapter {

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

Answer 1

нашел мою проблему! Мой Spring Boot Backend использовал неверный конфигурационный файл CORS. Я сделал некоторые изменения в nginx.conf и заменил конфигурацию Spring Boot CORS на этот ответ (старый, а не обновленный) @alexanoid. Мой текущий nginx.conf (включает поддержку реакции-маршрутизатора):

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;

  }
}