Vue使用axios引起的后台session不同

古城微笑少年丶 2022-04-13 13:07 207阅读 0赞

新项目前端用的Vue全家桶，使用axios代替ajax请求后台接口，在调整注册接口的时候，发现在session里取不到验证码，排查后才知道获取验证码和注册两个请求的session不同，sessionId不一样。

现在调整一下Vue的配置，修改main.js文件，添加如下两行代码

import axios from 'axios'
    axios.defaults.withCredentials=true;

修改后

import Vue from 'vue'
    import App from './App'
    import router from './router'
    import ElementUI from 'element-ui'
    import 'element-ui/lib/theme-chalk/index.css';
    import axios from 'axios'
    // 默认false 会导致后台接收到的同一用户的不同请求sessionid都不同,需要改为true
    axios.defaults.withCredentials=true;
    
    Vue.config.productionTip = false
    Vue.use(ElementUI)
        /* eslint-disable no-new */
    new Vue({
        el: '#app',
        router,
        components: { App },
        template: '<App/>'
    })

同时后台也需要配合修改，后台用的是Spring Boot，下面是修改后的结果

@Configuration
    public class CorsConfig {
        private CorsConfiguration buildConfig() {
            CorsConfiguration corsConfiguration = new CorsConfiguration();
            corsConfiguration.setAllowCredentials(true);
            // 设置setAllowCredentials = true后就不能设置为*了，要设置具体的
            corsConfiguration.addAllowedOrigin("http://192.168.0.35:8080");
            corsConfiguration.addAllowedOrigin("http://localhost:8080");
            // 允许任何头
            corsConfiguration.addAllowedHeader("*");
            // 允许任何方法（post、get等）
            corsConfiguration.addAllowedMethod("*");
            return corsConfiguration;
        }
    
        @Bean
        public CorsFilter corsFilter() {
            UrlBasedCorsConfigurationSource source = new UrlBasedCorsConfigurationSource();
            // 对接口配置跨域设置
            source.registerCorsConfiguration("/**", buildConfig());
            return new CorsFilter(source);
        }
    }

这是一个允许跨越请求的类

设置

corsConfiguration.setAllowCredentials(true);

设置了上行代码后，addAllowedOrigin设置成\*就不允许了

corsConfiguration.addAllowedOrigin("*")

需要设置成指定的地址

corsConfiguration.addAllowedOrigin("http://192.168.0.35:8080");
    corsConfiguration.addAllowedOrigin("http://localhost:8080");

这样就ok了