首先声明我前端设置了以下代码:

import axios from 'axios'
axios.defaults.withCredentials = true;
axios.defaults.timeout = 5000;
Vue.prototype.$ajax = axios;

后端同样设置了请求头:


        response.setHeader("Access-Control-Allow-Credentials", "true");
      

但是测试过程中,post请求仍然不携带cookie,问题图片如下:

 此时我查看到我在发送post请求之前,浏览器还发送了一个OPTION请求

 这个请求被我后端拦截,我上网检查查询了这个请求的作用,以下来源于网络

options 请求就是预检请求,可用于检测服务器允许的 http 方法。当发起跨域请求时,由于安全原因,触发一定条件时浏览器会在正式请求之前自动先发起 OPTIONS 请求,即 CORS 预检请求,服务器若接受该跨域请求,浏览器才继续发起正式请求。

即当我向后端先发送post请求之前,浏览器会先发送OPTION请求判断此地址是否可用,因为我得后端将这个预检请求拦截,导致我得post没有发送,也就没有携带cookie一说了

解决办法,我选择一个一劳永逸的办法,是在后端的拦截器处,将所有的OPTION请求都通过,具体代码如下

 @Override
    public boolean preHandle(HttpServletRequest request, HttpServletResponse response, Object handler) throws Exception {
        //判断请求是否是OPTION如果是则返回true,通过该请求,当然我们也可以对其他请求进行处理,我在此处就不展示了~
        if(OPTIONS.equalsIgnoreCase(request.getMethod())){
            return true;
        }
}

 测试结果,post请求发送成功,cookie数据也被传递过去了

Logo

华为开发者空间,是为全球开发者打造的专属开发空间,汇聚了华为优质开发资源及工具,致力于让每一位开发者拥有一台云主机,基于华为根生态开发、创新。

更多推荐