Идеальное решение для перекрестного домена Spring Boot + Vue Axios

задняя часть

предисловие

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

перекрестный домен

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

Решение

В настоящее время существует три основных решения для режима разделения фронт-бэк-офиса:

  • прокси-сервер webpack: действителен только в режиме разработки, он будет недействителен после упаковки.
  • cors: доступен как для среды разработки, так и для рабочей среды.
  • nginx: доступен только для производственных сред.

В этой статье в основном рассказывается о методе cors, который требует взаимодействия между интерфейсом и сервером.

стойка регистрации

использование стойки регистрацииvue-admin-templateСкаффолдинг, сетевые запросы используют Axios. Axios — это HTTP-клиент на основе обещаний, который может отправлять запросы на получение и публикацию.

Найдите в проекте файлы, инкапсулированные Axios, и добавьте свойства при создании Axios.withCredentials: true:

    const service = axios.create({
        baseURL:  process.env.VUE_APP_BASE_API,
        withCredentials:  true,
        timeout:  5000
    })

За кулисами

Недавно построенный на заднем планеWebMvcConfigкласс, наследованиеWebMvcConfigurer, единообразно настройте глобальный междоменный запрос.

@Configuration
public class WebMvcConfig implements WebMvcConfigurer {

        /**
         *  允许跨域访问
         */
        @Override
        public void addCorsMappings(CorsRegistry registry) {
                  registry.addMapping("/**")  // 可限制哪个请求可以通过跨域
                  .allowedHeaders("*")  // 可限制固定请求头可以通过跨域
                  .allowedMethods("*") // 可限制固定methods可以通过跨域
                  .allowedOrigins("*")  // 可限制访问ip可以通过跨域
                  .allowCredentials(true) // 是否允许发送cookie
                  .exposedHeaders(HttpHeaders.SET_COOKIE);
          }
          
}

конец

Пока междоменная проблема решена, вотПример исходного кода, я надеюсь, что это может помочь вам.

Категории