Springboot + vue separa los extremos frontal y posterior para resolver el problema de la depuración conjunta local de cookies y entre dominios

Antecedentes : un proyecto separado creado con vue en la parte frontal y un proyecto separado creado con springboot en la parte posterior. Al depurar en la misma máquina localmente, debe iniciar los proyectos de front-end y back-end. Vue inicia el puerto 9527 y Springboot inicia el puerto 8083, lo que causa problemas entre dominios y problemas de transmisión de cookies entre dominios.

Los problemas que surgen : 1. ¿Cómo conectar diferentes puertos locales? 2. ¿Cómo resolver el problema entre dominios? 3. ¿Cómo solucionar el problema de la pérdida de cookies causada por dominios cruzados?

1. ¿Cómo conectar diferentes puertos locales?

Una vez que la interfaz inicia un puerto, como 9527, la parte posterior inicia un puerto diferente, como 8083

Axios utilizado por el vue del proyecto de front-end, y luego establece la baseUrl de la interfaz de back-end en el front-end, luego se pueden conectar el front-end y el back-end.

const service = axios.create({
  baseURL: 'http://127.0.0.1:8083'
})

2. ¿Cómo resolver el problema entre dominios?

El primer punto: la solución de back-end de problemas de dominio cruzado . El siguiente código se puede resolver fácilmente: (Hay cuatro formas de resolver problemas entre dominios en el backend. Esta es la más sencilla. Para conocer otras formas, consulte: https://blog.csdn.net/Mint6/article / details / 104726325 )

/**
 * @Auther: Administrator
 * @Date: 2020/2/23 22:09
 * @Description:
 */
@Configuration
public class WebMvcConfg implements WebMvcConfigurer {

    @Override
    public void addCorsMappings(CorsRegistry registry) {
        //设置允许跨域的路径
        registry.addMapping("/**")
                //设置允许跨域请求的域名
                //当**Credentials为true时，**Origin不能为星号，需为具体的ip地址【如果接口不带cookie,ip无需设成具体ip】
                .allowedOrigins("http://localhost:9527")
                //是否允许证书 不再默认开启
                .allowCredentials(true)
                //设置允许的方法
                .allowedMethods("*")
                //跨域允许时间
                .maxAge(3600);
    }

}

3. ¿Cómo solucionar el problema de la pérdida de cookies causada por dominios cruzados?

Primero, modifique el código de back-end de la segunda pregunta:. AllowedOrigins ("http: // localhost: 9527") no puede escribir * aquí , debe completar el http: // ip: número de puerto real del front-end proyecto

En segundo lugar, modifique el código de front-end: con Credenciales en axios , que es el primer paso de la configuración básica de axios, establecido en verdadero

const service = axios.create({
  baseURL: 'http://127.0.0.1:8083',
  withCredentials: true
})

Bueno, hasta ahora, la depuración conjunta local del proyecto de separación de front-end y back-end no es un problema.