专栏首页后端开发随笔跨域请求传递Cookie问题

跨域请求传递Cookie问题

问题描述

前后端完全分离的项目,前端使用Vue + axios,后端使用SpringMVC,容器为Tomcat。 使用CORS协议解决跨域访问数据限制的问题,但是发现客户端的Ajax请求不会自动带上服务器返回的Cookie:JSESSIONID。 导致每一个Ajax请求在服务端看来都是一个新的请求,都会在服务端创建新的Session(在响应消息头中设置Set-Cookie:JSESSIONID=xxx)。 而在项目中使用了Shiro框架,用户认证信息是放在Session中的,由于客户端不会把JSESSIONID返回给服务器端,因此使用Session策略存放数据的方式不可用。

原因分析

实际上,这是浏览器的同源策略导致的问题:不允许JS访问跨域的Cookie。 举个例子,现有网站A使用域名a.example.com,网站B使用域名b.example.com,如果希望在2个网站之间共享Cookie(浏览器可以将Cookie发送给服务器),那么在设置的Cookie的时候,必须设置domain为example.com。

解决方案

需要从2个方面解决: 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 CORS 跨域发送 Cookie https://segmentfault.com/q/1010000009193446 vuejs (前端项目) + spring mvc(后台项目),每次ajax请求都是新的session Id https://www.w3.org/TR/cors/ Cross-Origin Resource Sharing

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

我来说两句

0 条评论
登录 后参与评论

相关文章

  • 解决浏览器跨域限制方案之CORS

    CORS是解决浏览器跨域限制的W3C标准,详见:https://www.w3.org/TR/cors/。 根据CORS标准的定义,在浏览器中访问跨域资源时,需...

    2Simple
  • 解决浏览器跨域限制方案之WebSocket

    WebSocket是在HTML5中引入的浏览器与服务端的通信协议,可以类比HTTP。 可以在支持HTML5的浏览器版本中使用WebSocket进行数据通信,常...

    2Simple
  • 细说shiro之三:在独立应用中使用shiro

    1. 下载 在非Web环境的独立应用中使用Shiro时,只需要shiro-core组件。 在Maven项目中的依赖配置如下:

    2Simple
  • 跨域问题的一次深入研究

    最近在业务代码中深受跨域问题困扰,因此特别写一篇博客来记录一下自己对跨域的理解以及使用到的参考资料。本文的项目背景基于vue+vuex+axios+spring...

    眯眯眼的猫头鹰
  • NLP系列学习:生成型模型和判别型模型

    在学习机器学习的过程中我们总会遇见一些模型,而其中的一些模型其实可以归类于生成模型或者是判别模型中去,而这一篇文章我将会简单的概述下我最近所遇到的一些模型,并且...

    云时之间
  • 深入了解浏览器存储:对比Cookie、LocalStorage、sessionStorage与IndexedDB

    摘要: 对比Cookie、LocalStorage、sessionStorage与IndexedDB

    Fundebug
  • 机器人视觉技术之嵌入式系统的应用

    不论是在工业控制中,还是在商业领域里,机器人技术都得到了广泛的应用。从用于生产加工的传统工业机器人到丰富大众生活的现代娱乐机器人,都与嵌入式系统密不可分。现有的...

    机器人网
  • springcloud zuul的跨域问题

    正常情况下,跨域是这样的:  1. 微服务配置跨域+zuul不配置=有跨域问题  2. 微服务配置+zuul配置=有跨域问题  3. 微服务不配置+zuul不配...

    似水的流年
  • 机器人实用Python代码合集,帮你搞定自主导航 |GitHub高热

    量子位
  • 机器人科技公司的创业故事

    第十届机器人科学与系统大会于7月12日-16日在加州大学伯克利分校举行。从第一届开始,大会逐步发展壮大,今年与会者已超过800人,拥有28个研讨会,以及一个为期...

    机器人网

扫码关注云+社区

领取腾讯云代金券