Описание проблемы с перекрестным происхождением

Вы можете увидеть следующее сообщение об ошибке:

блокировано политикой CORS: в запрошенном ресурсе отсутствует заголовок Access-Control-Allow-Origin

Эта ошибка указывает на то, что запрос на определенный адрес был заблокирован протоколом CORS, поскольку в ресурсе отсутствует заголовок Access-Control-Allow-Origin.

Анализ проблем перекрестного происхождения

Основная причина проблем с перекрестным происхождением заключается в том, что браузеры по соображениям безопасности ограничивают доступ к ресурсам за пределами текущего сайта.

Например, рассмотрим веб-сайт, размещенный по адресу http://127.0.0.1:8080/, с определенной страницей. Если вы получаете доступ к ресурсам с одного и того же сайта, ограничений нет. Но если вы попытаетесь получить доступ к ресурсам с другого сайта (например, http://127.0.0.1:8081), браузер заблокирует запрос.

Примечание. Мы рассматриваем протокол, домен и порт как часть определения «того же происхождения».

Это ограничение не распространяется на элементы с атрибутом src, такие как теги img и script.

Исторически, когда интерфейс и сервер не были разделены, страницы и интерфейсы запросов существовали в одном домене и порту. Тогда браузеры разрешат запросам со страницы, размещенной в одном домене, запрашивать ресурсы из того же домена.

Например, http://127.0.0.1:8080/index.html может свободно запрашивать http://127.0.0.1:8080/a/b/c/userLit.

В настоящее время, когда интерфейсная и серверная части разделены на разные приложения, это запрещено и приведет к проблемам CORS.

Что такое происхождение и перекрестное происхождение?

Происхождение (или источник) состоит из протокола, домена и номера порта.

URL-адрес состоит из протокола, домена, порта и пути. Два URL-адреса считаются «одинаковыми», если их протокол, домен и порт идентичны. Любая разница в любом из этих трех элементов представляет собой запрос между источниками.

Рассмотрите возможность сравнения источников происхождения для https://www.baidu.com/index.html:

Что такое политика одного и того же происхождения?

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

Политика одинакового происхождения включает в себя:

1. Политика одинакового происхождения DOM: предотвращает манипуляции DOM с страницами разных источников. Применяется главным образом к сценариям iframe с несколькими источниками, когда iframe разных доменов не могут получить доступ друг к другу.
2. Политика XMLHttpRequest одного и того же источника: запрещает HTTP-запросы к различным источникам с использованием объектов XHR.

Решение проблем перекрестного происхождения в Spring Boot

1. Создание фильтра для обработки CORS

В проекте, где интерфейсная и серверная части развертываются отдельно, использование CORS имеет решающее значение. Файлы cookie используются для хранения информации для входа в систему пользователя, а перехватчики Spring управляют разрешениями. Проблемы возникают, когда перехватчик и CORS обрабатываются в неправильном порядке, что приводит к ошибке CORS.

HTTP-запрос сначала проходит через фильтр, прежде чем достичь сервлета, а затем перехватчика. Чтобы гарантировать, что обработка CORS происходит до перехвата авторизации, мы можем поместить конфигурацию CORS в фильтр.

@Configuration
public class CorsConfig {

    @Bean
    public CorsFilter corsFilter() {
        CorsConfiguration corsConfiguration = new CorsConfiguration();
        corsConfiguration.addAllowedOrigin("*");
        corsConfiguration.addAllowedHeader("*");
        corsConfiguration.addAllowedMethod("*");
        corsConfiguration.setAllowCredentials(true);

        UrlBasedCorsConfigurationSource urlBasedCorsConfigurationSource = new UrlBasedCorsConfigurationSource();
        urlBasedCorsConfigurationSource.registerCorsConfiguration("/**", corsConfiguration);
        return new CorsFilter(urlBasedCorsConfigurationSource);
    }
}

2. Настройка CORS в WebMvcConfigurer

Хотя JSONP может решать проблемы перекрестного происхождения во внешнем интерфейсе, он поддерживает только запросы GET, что является ограничением в приложениях RESTful. Вместо этого вы можете обрабатывать запросы из разных источников с помощью совместного использования ресурсов из разных источников (CORS) на внутренней стороне. Это решение не уникально для Spring Boot и использовалось в традиционных средах SSM. Вы настраиваете его, реализуя интерфейс WebMvcConfigurer и переопределяя метод addCorsMappings.

@Configuration
public class CorsConfig implements WebMvcConfigurer {

    @Override
    public void addCorsMappings(CorsRegistry registry) {
        registry.addMapping("/**")
                .allowedOrigins("*")
                .allowCredentials(true)
                .allowedMethods("GET", "POST", "PUT", "DELETE", "OPTIONS")
                .maxAge(3600);
    }
}

3. Настройка CORS в контроллере

Вы можете включить CORS для определенных методов контроллера, добавив аннотацию @CrossOrigin к аннотации @RequestMapping. По умолчанию @CrossOrigin разрешает все источники и методы HTTP, указанные в @RequestMapping.

@RestController
@RequestMapping("/account")
public class AccountController {

    @CrossOrigin
    @GetMapping("/{id}")
    public Account retrieve(@PathVariable Long id) {
        // ...
    }

    @DeleteMapping("/{id}")
    public void remove(@PathVariable Long id) {
        // ...
    }
}

Понимание параметров @CrossOrigin:

• @CrossOrigin без параметров разрешает доступ ко всем URL-адресам.
• @CrossOrigin(origins = "http://127.0.0.1:8080") ограничивает доступ к указанному URL.
• Эту аннотацию можно использовать для классов или методов.
• Атрибут value или origins указывает разрешенные URL-адреса.
• maxAge указывает максимальный срок хранения кэша предполетных запросов в секундах.
• allowCredentials указывает, разрешены ли учетные данные (файлы cookie). По умолчанию установлено значение false.
• AllowHeaders указывает разрешенные заголовки запроса.
• методы указывают разрешенные методы запроса, по умолчанию — GET, POST, HEAD.

Причины, по которым @CrossOrigin может не работать

1. Для поддержки @CrossOrigin версия Spring MVC должна быть 4.2 или выше.
2. Неправильные запросы могут отображаться как проблемы с перекрестным происхождением из-за неправильного ответа сервера.
3. Если добавление @CrossOrigin над аннотацией контроллера по-прежнему приводит к проблемам, одним из возможных решений является указание методов HTTP в @RequestMapping.

Пример:

@CrossOrigin
@RestController
public class PersonController {

    @RequestMapping(method = RequestMethod.GET)
    public String add() {
        // some code
    }
}