springboot+vue 前后端分离项目实战四解决vue不同的接口访问会有不同的sessionId和项目跨域问题

大鹏小站

于 2019-07-14 12:36:33 发布

阅读量1.3k

点赞数 1

CC 4.0 BY-SA版权

分类专栏： java-基础 vue springboot springboot+vue 前后端分离项目实战——人脸识别项目

本文链接：https://blog.youkuaiyun.com/linjpg/article/details/95872605

在前后端分离的项目中，由于登录信息存储在session中，不同Vue接口请求会产生不同sessionId。为了解决这个问题，可以在Vue的main.js中进行配置。然而，这会导致跨域问题，单纯在SpringBoot后端Controller使用@CrossOrigin无法生效。通过实现CORS配置接口，能够在后端彻底解决跨域问题。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

因为项目登录信息放到session中，vue不同的接口访问会有不同的sessionId，解决办法是在main.js中加入

axios.defaults.withCredentials = true

但是这样导致了一个跨域问题，后端Controller上加入@CrossOrigin不起作用了

所以后端项目可以加入CorsConfig接口，这样就完美解决了跨域问题

package com.face.server.config;

import org.springframework.boot.web.servlet.FilterRegistrationBean;
import org.springframework.context.annotation.Bean;
import org.springframework.context.annotation.Configuration;
import org.springframework.core.Ordered;
import org.springframework.web.cors.CorsConfiguration;
import org.springframework.web.cors.UrlBasedCorsConfigurationSource;
import org.springframework.web.filter.CorsFilter;

/**
 * Created by lin on 2019/7/14.
 */
@Configuration
public class CorsConfig {
    private CorsConfiguration buildConfig() {
        CorsConfiguration corsConfiguration = new CorsConfiguration();
        corsConfiguration.addAllowedOrigin("*");
        corsConfiguration.addAllowedHeader("*");
        corsConfiguration.addAl