解决axios跨域问题，解决跨域请求sessionId不一致问题

最新推荐文章于 2025-06-30 09:28:10 发布

汤姆猫丶

最新推荐文章于 2025-06-30 09:28:10 发布

阅读量1.2w

点赞数 3

CC 4.0 BY-SA版权

文章标签： axios跨域问题跨域sessionId不一致

本文链接：https://blog.youkuaiyun.com/qq_39403545/article/details/81673712

本文介绍如何通过配置Axios和后端过滤器来解决跨域问题，并确保sessionId的一致性。包括设置请求头、转换请求数据及启用credentials。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

axios.post跨域请求出错

①axios设置标题和转换请求数据

var HTTP = axios.create({
      baseURL:'http://localhost:8080/',
      headers: {'Content-Type': 'application/x-www-form-urlencoded'},
      transformRequest: [function (data) {
        // Do whatever you want to transform the data
        let ret = ''
        for (let it in data) {
          ret += encodeURIComponent(it) + '=' + encodeURIComponent(data[it]) + '&'
        }
        return ret
      }]
    })

调用：

HTTP.post('admin/user/login.action',{
    name:'test',password:111
})
.then(function(response){
    console.log(response.data);
});

②后台写一个过滤器重写请求报头

public void doFilter(ServletRequest servletRequest, ServletResponse servletResponse, FilterChain filterChain) throws IOException, ServletException {
        HttpServletResponse res = (HttpServletResponse) servletResponse;
        HttpServletRequest request=(HttpServletRequest)servletRequest;
        res.setContentType("textml;charset=UTF-8");
        res.setHeader("Access-Control-Allow-Origin", request.getHeader("Origin"));
        res.setHeader("Access-Control-Allow-Methods", "POST, GET, OPTIONS, DELETE");
        res.setHeader("Access-Control-Max-Age", "0");
        res.setHeader("Access-Control-Allow-Headers", "Origin, No-Cache, X-Requested-With, If-Modified-Since, Pragma, Last-Modified, Cache-Control, Expires, Content-Type, X-E4M-With,userId,token");
        res.setHeader("Access-Control-Allow-Credentials", "true");
        res.setHeader("XDomainRequestAllowed","1");
        filterChain.doFilter(servletRequest,servletResponse);
    }

跨域请求时的sessionId不一致

axios设置：

import axios from 'axios'
axios.defaults.withCredentials = true

$.ajax设置：

$.ajax({
url:url,
//加上这句话
xhrFields: {
   withCredentials: true
},
crossDomain: true,
success:function(result){
alert("test");
},
error:function(){
}
});