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

新项目前端用的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了

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

猜你喜欢