Vue解决跨域问题及每次请求session不一致的问题

最新推荐文章于 2025-04-09 09:35:55 发布

harveymomo

最新推荐文章于 2025-04-09 09:35:55 发布

阅读量4.4k

点赞数 2

分类专栏： vue 文章标签： vue.js 前端 javascript

本文链接：https://blog.youkuaiyun.com/liuzhang6966/article/details/125326920

版权

vue 专栏收录该内容

4 篇文章

订阅专栏

Vue解决跨域问题

在本地测试Vue + spring boot前后端分离项目时，因为前后端项目端口不一致会导致跨域问题

此时就需要前后端分别进行设置允许跨域处理
在设置允许跨域后，在登录场景下还会用到session,而session的原理就是在浏览器的cookie中保存一个sessionID

Vue设置

此处以axios为例

所以我们需要在跨域的过程中允许请求携带cookie
import axios from 'axios'

export function request(config) {
  // 创建axios的实例
  const instance = axios.create({
    baseURL: import.meta.env.VITE_API_DOMAIN,
   // baseURL: 'http://3710666.cn:4000/',
    timeout: 10000,
    withCredentials: true,
    crossDomain: true
  })
  //console.log

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;
    }

    .....
}

备注：

1. 加上： withCredentials: true,

2.主要是跟这个 baseURL 有关系 baseURL: import.meta.env.VITE_API_DOMAIN,

如果baseURL为： http://127.0.0.1:8080/，前端访问网址也必须为这个，使用

http://localhost:8080/ 还是存在session 不一致的情况，所以注意这个请求地址