Как устранить ошибку CORS?

Question

[Орхан Гасанлы]

Доброго времени суток, коллеги!
Расскажу проблему вкратце.
Имеется приложение:
- front-end - React
- backend - Spring Boot (микросервисы)
- nginx, k8s и т.д.

Конфигурация на уровне Spring Gateway (также на стороне gateway нaстроен ssl)

spring:
  cloud:
    gateway:
      default-filters:
        - DedupeResponseHeader=Access-Control-Allow-Credentials Access-Control-Allow-Origin
      # CORS configuration
      globalcors:
        add-to-simple-url-handler-mapping: true
        corsConfigurations:
          '[/**]':
            allowedOrigins: 
              - "https://example.com" # front-end URL
            allow-credentials: true
            allowedHeader: "*"
            allowedMethods:
              - "OPTIONS"
              - "GET"
              - "POST"
              - "PUT"
              - "DELETE"
              - "PATCH"

Конфигурация на уровне nginx:

server {

  listen    443 ssl;
  ssl_certificate /srv/ssl/tls.crt;
  ssl_certificate_key /srv/ssl/tls.key;
  ssl_protocols TLSv1 TLSv1.1 TLSv1.2;
  ssl_ciphers HIGH:!aNULL:!MD5;
  server_name localhost;

  location / {
    root /usr/share/nginx/html;
    index index.html index.htm;
    try_files $uri $uri/ /index.html;
    add_header 'Access-Control-Allow-Origin' 'https://example.com';
  }

  if($request_method = 'OPTIONS') {
    add_header 'Access-Control-Max-Age' 1720000;
    add_header 'Content-Type' 'text_plain; charset=utf-8';
    add_header 'Content-Length' 0;
    return 204;
  }

}

Ошибка на стороне фронта -

CORS header ‘Access-Control-Allow-Origin’ missing). Status code: 403

При проверке через Postman, если указать корректный Origin в header, то запрос проходит. Если указать другой Origin, то - 403. Т.е. в принципе, в бэке все ок. Проверил также через curl.

Насколько мне известно на стороне не нужно ничего настраивать, так как Origin отправляется автоматически. Но при этом почему-то не работает. И получаю вышеуказанную ошибку. Я сам бэкенд разработчик. И соответственно, могу проверить что-либо на своей стороне. Ну максимум на фронте. А вот, где может быть проблема на стороне конфигов сервера, даже не знаю.

Есть ли смысл настраивать что-либо на стороне фронта? Например, proxy
https://www.stackhawk.com/blog/react-cors-guide-wh...

Буду признателен за помощь или хотя бы за идеи.

Comments

[Aetae]

Прокси(webpack devaserver proxy) на стороне фронта нужно настраивать для локальной разработки, если фронт и бэк в проде в итоге будут висеть на одном и том же домене, чтоб прозрачно эмулировать собственно прод. Это элементарно делается на стороне фронта и бэка волновать не должно. Также в этом случае никаких Access-Control-Allow-Origin не нужно.

Если всё же сервер будет висеть на другом домене, то Access-Control-Allow-Origin действительно нужен. Тут мы переходим к вашей проблеме. На первый взгляд ваш конфиг должен работать, попробуйте для начала сделать add_header 'Access-Control-Allow-Origin' '*'; если всё заработает - проблема в указанном домене, разбирайтесь в чём разница. Также попробуйте перенести add_header в if(OPTIONS).

[Орхан Гасанлы]

Aetae,
благодарю за ответ.
Фронт и бэк крутятся на разных доменах. Например, фронт на example.com, а бэкенд на example-1.com
Если в postman или в curl в Origin указать урл фронта, то все работает.
А через браузер не работает. Хотя, в браузере видно, что фронт автоматически отправляет Origin.

Также попробуйте перенести add_header в if(OPTIONS).

Если через postman или curl сделать OPTIONS запрос, то все работает. Через фронт такая же ситуация. Отмечу, что при запросе через фронт preflight летит OPTIONS запрос.

[Aetae]

Орхан Гасанлы, мб какие-то хэдеры браузера что-то ломают. В браузере f12 > network > тык на упавший запрос -> copy as curl.
Ну и собственно попробовать этот curl\в postman import его же.

Ещё попробовать иной, чистый, браузер, мож вас адблокер рубит.)

Answer 1

[Wan-Derer]

Я у себя добавил такую конфигурацию:

/*
https://www.baeldung.com/spring-webflux-cors
https://www.baeldung.com/spring-cors
 */

package com.broadview.bvreportsgenerator.configuration;

import org.springframework.context.annotation.Configuration;
import org.springframework.web.reactive.config.CorsRegistry;
import org.springframework.web.reactive.config.EnableWebFlux;
import org.springframework.web.reactive.config.WebFluxConfigurer;

@Configuration
@EnableWebFlux
public class CorsGlobalConfiguration implements WebFluxConfigurer {

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

Это вариант для WebFlux. Если у тебя "обычный" web, будут немного другие вызовы, см. статьи в коменте.

Comments

[Орхан Гасанлы]

Благодарю за ответ.
В данном случае, если я правильно понимаю, то вы разрешили запрос с любых урлов.

Похожий конфиг у меня есть для dev профиля.

@CrossOrigin
@Configuration
@Profile({"dev", "liquibase"})
public class CustomCorsConfiguration {

  @Bean
  public CorsWebFilter corsWebFilter() {

    final CorsConfiguration corsConfig = new CorsConfiguration();
    corsConfig.setAllowedOrigins(Collections.singletonList("*"));
    corsConfig.setMaxAge(3600L);
    corsConfig.setAllowedMethods(Arrays.asList("OPTIONS", "GET", "POST", "PUT", "DELETE", "PATCH"));
    corsConfig.addAllowedHeader("*");

    final UrlBasedCorsConfigurationSource source = new UrlBasedCorsConfigurationSource();
    source.registerCorsConfiguration("/**", corsConfig);

    return new CorsWebFilter(source);
  }
}

Однако, отмечу, что я предпочитаю использовать декларативный стиль конфигурации через yaml. В принципе, не думаю, что проблема в бэке, ибо я его уже тестил. Но все равно спасибо.

[Wan-Derer]

Орхан Гасанлы, у меня тоже всё работало через Postman, и GET-запросы через браузер шли нормально. А вот через фронт-приложение (у меня Angular) возникала ошибка CORS. Этот конфиг помог с этим справиться.

[Орхан Гасанлы]

Wan-Derer,
я добавил вышеуказанный конфиг и фронт заработал, но как бы фронт не отправляет заголовок Origin и потому, проблема CORS не возникает. А если отправит, то проблема возникнет

[Орхан Гасанлы]

Wan-Derer, в каком-то смысле ваш ответ помог мне. Если вкратце, то нужно было добавить java config.

@CrossOrigin
@Configuration
@RequiredArgsConstructor
public class GlobalCorsConfiguration {

  private final CorsProperties corsProperties;

  @Bean
  public CorsWebFilter corsWebFilter() {
    final CorsConfiguration corsConfig = new CorsConfiguration();
    corsConfig.setAllowedOrigins(
        Arrays.asList(corsProperties.getAllowedOrigins())
    );
    corsConfig.setMaxAge(3600L);
    corsConfig.setAllowedMethods(Arrays.asList("OPTIONS", "GET", "POST", "PUT", "DELETE", "PATCH"));
    corsConfig.addAllowedHeader("*");

    final UrlBasedCorsConfigurationSource source = new UrlBasedCorsConfigurationSource();
    source.registerCorsConfiguration("/**", corsConfig);

    return new CorsWebFilter(source);
  }
}

такой конфиг решил проблему.
Хотя, если честно, это бредово, то что с yaml конфигурацией работает все, кроме фронта в браузере. Но с java конфигурацией работает и фронт. Почему так... не пойму.

[Wan-Derer]

Орхан Гасанлы, Кстати, может так получиться что этот конфиг не понадобится при выпуске готового приложения. Когда мы пилим фронт (у меня Ангуляр, но с Реактом, вроде так же), для запуска используется специальный сервер на ноде, то который отзывается на порт 4200. Когда же мы деплоим фронт, мы получаем обычный набор HTML/CSS/JS, который скармливаем WEB-серверу (Apache, NGINX ...) или внедряем в наш бэк в качестве static контент.
Т.е. получается что запросы от фронта перестают быть "подозрительными" т.к. идут от обычного браузера.
Это только моё предположение, я пока разбираюсь с деплоем, надо будет проверить так ли это.

[Орхан Гасанлы]

Кстати, может так получиться что этот конфиг не понадобится при выпуске готового приложения.

Да как-то что на проде, что на тестовом реакт приложение без Java конфигурации не хотело дружить с CORS. А после добавления Java конфигурации заработало.
Еще раз спасибо