Пружинная загрузка HTTPS с CORS, Angular 5 удваивает все запросы

Question

a имеют Spring boot(v5) with embeded tomcat REST API для моего маленького Angular 5 веб-сайта, и этот REST API работает по протоколу https, поэтому мне нужно включить cors origin, чтобы мой веб-сайт мог взаимодействовать с REST API. Как я это сделал:

@SpringBootApplication
public class AdminPanelApplication {
    public static void main(String[] args) {
        SpringApplication.run(AdminPanelApplication.class, args);
    }

    @Bean
    public WebMvcConfigurer corsConfigurer() {
        return new WebMvcConfigurer() {
            @Override
            public void addCorsMappings(CorsRegistry registry) {
                registry.addMapping("/**")
                        .allowCredentials(true)
                        .allowedOrigins("*")
                        .allowedMethods("*")
                        .allowedHeaders("*");
            }
        };
    }
}

Но с этим cors origin мой веб-сайт начал отправлять 2 запроса на все запросы, первый - это запрос OPTION, второй - реальный (получить, отправить и т. Д.).

Я предполагаю, что это плохо, по крайней мере для загрузки на сервер (вместо того, чтобы отправлять один запрос, я всегда отправляю два (даже если первый - очень легкий option запрос), я не вижу такого поведения на любом сайте (например, stackoverflow :))

Пример:

Итак, я предполагаю, что я делаю что-то не так, так как правильно настроить источник Cors (или что-то еще, возможно)?

Answer 1

Я не думаю, что вы делаете что-то не так, это нормально. Если вы отправляете какие-либо пользовательские заголовки помимо автоматически отправляемых заголовков, браузер сначала делает запрос OPTION более безопасным.

Предварительно просвеченные запросы сначала отправляют HTTP-запрос методом OPTIONS к ресурсу в другом домене, чтобы определить, является ли фактический запрос безопасно отправить. Межсайтовые запросы предварительно просвечиваются как это, так как они могут иметь значение для пользовательских данных.

См. здесь для получения подробной информации о CORS.

Answer 2

Вы не делаете ничего плохого.Первый OPTION-запрос: Preflight-запрос , автоматически отправляемый браузером.Он проверяет, действительно ли сервер разрешает запрос от источника, метода и т. Д. Вы можете установить максимальный возраст CorsConfiguration.setMaxAge , который указывает браузеру кэшировать ответ Preflight на определенный период.

Answer 3

Первый запрос типа OPTIONS, это нормально. Метод HTTP OPTIONS используется для описания параметров связи для целевого ресурса.

Подробнее об этом здесь: https://developer.mozilla.org/en-US/docs/Web/HTTP/Access_control_CORS

Answer 4

Это нормально, и это не ваш код, его браузер.

Первый запрос PREFLIGHT отправляется как ОПЦИИ для проверки только заголовков и во избежание побочных эффектов отправки первого запроса в виде GET или POST.

CORS в основном реализован для обеспечения безопасности браузеров, использующих заголовки ответов.Предположим, вы отправляете данные на какой-либо междоменный сервер, и у сервера нет соответствующих заголовков, но, поскольку ваш запрос - GET или POST - допустимый запрос, сервер будет обрабатывать запрос в обычном режиме, в то время как браузер выдаст ошибку CORS из-за отсутствия заголовков.,

В качестве меры предосторожности для этой ситуации в качестве ОПЦИЙ делается предварительный запрос для проверки отправляемых сервером заголовков ответа перед выполнением исходного запроса.Если сервер не отправил правильные заголовки, браузер не будет делать оригинальный запрос.