Vue解决跨域问题
在本地测试Vue + spring boot前后端分离项目时,因为前后端项目端口不一致会导致跨域问题
此时就需要前后端分别进行设置允许跨域处理
在设置允许跨域后,在登录场景下还会用到session,而session的原理就是在浏览器的cookie中保存一个sessionID
所以我们需要在跨域的过程中允许请求携带cookie
Vue设置
此处以axios为例
//导入axios
import axios from 'axios';
//设置axios运行携带cookie发送跨域请求
axios.defaults.withCredentials = true;
//设置axios请求URL
axios.defaults.baseURL = "http://127.0.0.1:8081"
Springboot后端设置允许跨域
配置拦截器
/**
* WEB拦截器配置
*/
@Configuration
public class WebConfig implements WebMvcConfigurer {
//设置拦截器
@Override
public void addInterceptors(InterceptorRegistry registry) {
//允许跨域
registry.addInterceptor(new FilterConfig()).addPathPatterns("/**");
}
}
配置允许跨域
/**
* 允许跨域请求
* @author 无缺
*/
@Component
public class FilterConfig implements HandlerInterceptor{
@Override
public boolean preHandle(HttpServletRequest request, HttpServletResponse response, Object handler) throws Exception {
//支持跨域请求,必须是具体的请求域
response.setHeader("Access-Control-Allow-Origin",request.getHeader("Origin"));
//支持请求方式
response.setHeader("Access-Control-Allow-Methods", "*");
//是否支持cookie跨域
response.setHeader("Access-Control-Allow-Credentials", "true");
response.setHeader("Access-Control-Allow-Headers", "Authorization,Origin, X-Requested-With, Content-Type, Accept,Access-Token");
return true;
}
.....
}
发送axios请求
axios({
url:'/info/getInfoData',
type: 'GET',
}).then(function(response){
if (response.data.code == 200){
that.resDate = response.data.data;
}
})
<font color=red>正常情况下到这里就能访问了,但是在使用过程中,如果访问 http://127.0.0.1:8081 的话还是会出现跨域不携带cookie的问题</font>
<font color=pink>此时应该访问 http://localhost:8080 </font>
1 条评论
辛苦了!~~