跨域请求传递Cookie问题

问题讲述

左右端完全分离的档次,前端选用Vue +
axios,后端使用SpringMVC,容器为汤姆cat。
动用CO汉兰达S协议消除跨域访问数据限制的题材,不过发现客户端的Ajax请求不会活动带上服务器重返的库克ie:JSESSIONID。
导致每一个Ajax请求在服务端看来都以三个新的乞请,都会在服务端创立新的Session(在响应音信头中设置Set-Cookie:JSESSIONID=xxx)。
而在品种中利用了Shiro框架,用户认证的音信是置身Session中的,由于客户端不会把JSESSIONID重返给服务器端,由此采纳Session策略存放数据的办法不可用。

缓解方案

亟待从1个地点缓解:
1.劳务器端使用CROS协议化解跨域访问数据难点时,供给设置响应消息头Access-Control-Allow-Credentials值为“true”。
还要,还必要设置响应音讯头Access-Control-Allow-Origin值为钦命单一域名(注:不可能为通配符“*”)。

@Override
public void doFilter(ServletRequest request, ServletResponse response, FilterChain chain)
        throws IOException, ServletException {
    HttpServletRequest req = (HttpServletRequest)request;
    HttpServletResponse resp = (HttpServletResponse)response;

    String origin = req.getHeader("Origin");
    if(origin == null) {
        origin = req.getHeader("Referer");
    }
    resp.setHeader("Access-Control-Allow-Origin", origin);            // 允许指定域访问跨域资源
    resp.setHeader("Access-Control-Allow-Credentials", "true");       // 允许客户端携带跨域cookie,此时origin值不能为“*”,只能为指定单一域名

    if(RequestMethod.OPTIONS.toString().equals(req.getMethod())) {
        String allowMethod = req.getHeader("Access-Control-Request-Method");
        String allowHeaders = req.getHeader("Access-Control-Request-Headers");
        resp.setHeader("Access-Control-Max-Age", "86400");            // 浏览器缓存预检请求结果时间,单位:秒
        resp.setHeader("Access-Control-Allow-Methods", allowMethod);  // 允许浏览器在预检请求成功之后发送的实际请求方法名
        resp.setHeader("Access-Control-Allow-Headers", allowHeaders); // 允许浏览器发送的请求消息头
        return;
    }

    chain.doFilter(request, response);
}

2.客户端须求安装Ajax请求属性withCredentials=true,让Ajax请求都带上Cookie。

  • 对于XMLHttpRequest的Ajax请求

    var xhr = new XMLHttpRequest();
    xhr.open('GET', url);
    xhr.withCredentials = true; // 携带跨域cookie
    xhr.send();
    
  • 对于JQuery的Ajax请求

    $.ajax({
    type: "GET",
    url: url,
    xhrFields: {
        withCredentials: true // 携带跨域cookie
    },
    processData: false,
    success: function(data) {
        console.log(data);  
    }
    });
    
  • 对于axios的Ajax请求

    axios.defaults.withCredentials=true; // 让ajax携带cookie
    

【参考】
http://harttle.com/2016/12/28/cors-with-cookie.html CO瑞虎S 跨域发送
Cookie
https://segmentfault.com/q/1010000009193446 vuejs (前端项目) +
spring mvc(后台项目),每回ajax请求都是新的session Id
https://www.w3.org/TR/cors/ Cross-Origin Resource Sharing

相关文章