Разделение внешнего и внутреннего интерфейса SpringBoot + Vue, запрос междоменной проблемы API

Java

предисловие

Недавно мне было скучно дома во время китайского Нового года, и у меня просто было много времени, чтобы изучить Vue.Кстати, я сделал небольшой купол с добавлениями, удалениями и изменениями + сопоставление ключевых слов + пейджинг.Однако, когда я использовал Vue для запроса API, предоставляемого бэкендом, я обнаружил большую проблему, фронт и бэкэнд были разделены.Однако при запросе должна быть междоменная проблема, так как ее решить?

Интерфейсные решения

Идея: Поскольку большинство проектов Vue теперь быстро собираются с помощью скаффолдинга, мы можем напрямую создать файл конфигурации vue.config.js в проекте, а затем настроить в нем прокси-прокси для решения проблемы. код

module.exports = {
    devServer: {
        proxy: {
            '/api':{
                target: 'http://127.0.0.1:8181', //API服务器的地址
                ws: true, //代理websockets
                changeOrigin: true, // 是否跨域，虚拟的站点需要更管origin
                pathRewrite: {
                    '^/api': ''
                }
            }
        }
    }
};

После этой конфигурации, когда Vue использует axios или ajax для вызова фонового API, ему нужно только отправить запрос в формате /api/xx/xx в пути запроса. Этот подход имеет два преимущества 1: Междоменная проблема решена, и только интерфейс для вызова нужно писать каждый раз при выполнении запроса, а префикс вообще не нужно заново писать 2: Поскольку он предоставляет прокси, полезно скрыть реальный адрес сервера API и обеспечить безопасность сервера.

Серверные решения

Идеи: Я считаю, что большая часть Java теперь принадлежит семейству Spring, и SpringBoot также был популярен в последние годы.В основном его использовало большинство обслуживающего персонала, поэтому мы можем создать пакет конфигурации конфигурации в проекте SpringBoot. , создать в нем класс конфигурации webconfig, и решить междоменную проблему, реализовав метод addCorsMappings интерфейса WebMvcConfigurer

package com.vue.config;

import org.springframework.context.annotation.Configuration;
import org.springframework.web.servlet.config.annotation.CorsRegistry;
import org.springframework.web.servlet.config.annotation.WebMvcConfigurer;

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

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

Категории