axios 解决跨域不携带 cookie 的问题

最新推荐文章于 2024-01-31 11:06:51 发布

原创最新推荐文章于 2024-01-31 11:06:51 发布 · 1.7k 阅读

1 ·

CC 4.0 BY-SA版权

Vue 专栏收录该内容

2 篇文章

订阅专栏

当使用axios进行跨域请求时，由于CORS策略，默认不会携带cookie。解决方案包括后端设置响应头，如将Access-Control-Allow-Origin设为前端部署地址，以及在axios配置中设置withCredentials为true，允许携带cookie。

文章目录

1. 说明
2. 解决方案
- 2.1 后端
- 2.1 前端axios配置

1. 说明

后端使用CORS解决跨域问题，会导致axios请求不再携带cookie., 因此在需要使用session的场合的时候，后端给即使前端设置了JSESSIONID，后端的请求也不会携带其到请求头中。

2. 解决方案

2.1 后端

这里使用的是 Servlet的Filter进行响应头的改写，其他语言只用关注如何改写响应头即可

Access-Control-Allow-Origin ：必须设置为固定的固定的IP地址，前端项目部署机器的固定地址。
Access-Control-Allow-Credentials：告诉前端可以携带Cookie.
其他请求头为解决跨域问题而存在的，如果需要的解决跨域问题则可以使用，如果仅仅是为了解决不能携带Cookie的问题，则使用上面两个响应头即可。

@Override
public void doFilter(ServletRequest servletRequest, ServletResponse servletResponse, FilterChain filterChain) throws IOException, ServletException {

        HttpServletResponse response = (HttpServletResponse)servletResponse;

        // Vue 跨域携带 Cookie 必须写的两行
        response.setHeader("Access-Control-Allow-Origin", "http://localhost:8081");
        response.setHeader("Access-Control-Allow-Credentials", "true");

        response.setHeader("Access-Control-Allow-Headers", "Content-Type,Content-Length, Authorization, Accept,X-Requested-With");
        response.setHeader("Access-Control-Allow-Methods","PUT,POST,GET,DELETE,OPTIONS");
        response.setHeader("X-Powered-By","Jetty");

        String method= ((HttpServletRequest)servletRequest).getMethod();
        if (method.equals("OPTIONS")){
            ((HttpServletResponse)servletResponse).setStatus(200);
            return;
        }
        filterChain.doFilter(servletRequest, servletResponse);
    }

2.1 前端axios配置

关键部分： withCredentials:true

export function request(config, loading=true){
    const instance = axios.create({
        baseURL: 'http://localhost:8080/meiow',
        timeout: 5000,
        withCredentials:true
    });
    
    return instance;
}