Vue使用axios引起的后台session不同
新项目前端用的Vue全家桶,使用axios代替ajax请求后台接口,在调整注册接口的时候,发现在session里取不到验证码,排查后才知道获取验证码和注册两个请求的session不同,sessionId不一样。现在调整一下Vue的配置,修改main.js文件,添加如下两行代码import axios from 'axios'axios.defaults.withCredentials=...
·
新项目前端用的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了
更多推荐
已为社区贡献6条内容
所有评论(0)