ajax跨域请求传递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请求
$.ajaxSetup({xhrFields: {//全局设置
    withCredentials: true
}});

$.ajax({
    type: "GET",
    url: url,
    xhrFields: {
        withCredentials: true // 携带跨域cookie  //单个设置
    },
    //crossDomain: true,
    //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

 

PHP设置允许跨域

<?php
    header('Content-Type: text/html;charset=utf-8');
    header('Access-Control-Allow-Credentials:true'); // 设置是否允许发送 cookies
    header('Access-Control-Allow-Origin:'.(isset($_SERVER['HTTP_ORIGIN'])?$_SERVER['HTTP_ORIGIN']:'*')); // *代表允许任何网址请求
    header('Access-Control-Allow-Methods:POST,GET,OPTIONS,DELETE'); // 允许请求的类型
    header('Access-Control-Max-Age:1800');//单位秒,1800s=30分钟
    header('Access-Control-Allow-Headers:Content-Type,Content-Length,Accept-Encoding,X-Requested-with, Origin'); // 设置允许自定义请求头的字段
    //var_dump($_SERVER);
    setcookie("php","ok");
    echo json_encode($_COOKIE);
    if(isset($_GET['name'])){
        echo $_GET['name'];
    }else{
        echo "请求成功但。。。。";
    }
?>

 

ajax跨域请求及传递cookie

一、ajax跨域访问     

先要搞清楚什么是ajax跨域。看如下例子即可明白:

网站A:a.test.com 通过ajax请求网站B:b.test.com上的接口,很明显网站A和网站B 是两个不同的域,而处于安全机制,JS只能访问与所在页面同一个域(相同协议、域名、端口)的内容,但是我们在项目开发时,经常遇到一个页面的js代码,通过ajax去访问另一个服务器并返回数据,这就是ajax跨域访问的由来。

       跨域访问一般是被阻止的,因为在安全上有个规则:同源策略要求客户端和服务端都必须在一个域内才能通信。所谓同源也就是网站A和网站B必须是相同的域名。

如何解决ajax跨域,而让不相同的两个域之间通信呢?

目前提供最常见的两种方案:1. jsonp跨域请求. 2. CORS(Cross-Origin Resource Sharing)方案。

JSONP跨域请求方案:

1.type改成了get,JSONP只支持get请求,这个参数在JSONP场景下其实是可以忽略的,即使改成post,也会依然按get模式;
2.dataType改成了jsonp,这个参数标明要采用JSONP方式进行调用;
3.jsonp: “x5callback”,这个参数其实是一个约定的参数名,用于后端按照这个参数名获取一个回调函数名;
4.jsonpCallback:这个参数用来指定上面那个参数对应的回调函数名,如果不指定,jQuery会自动生成一个随机的函数名。


CORS方案

这个方案实现起来非常简单,只需要在服务端返回的头部信息中增加:

response.setHeader("Access-Control-Allow-Origin","http://b.test.com")

二、ajax跨域传递cookie

       理论上:

 $.ajax({
        headers: {'Cookie' : document.cookie },
        url: "sub.domain.com",
        success: function(){}
})
      通过修改请求头是可以传递cookie等信息的。但是w3c的标准写的很清楚,cookie,connection和content-length等是不安全的字段,容易导致多种的request smuggling攻击,不允许编程设置。这些字段浏览器会自动帮你设置,如果设置就会报出错误:“Refused to set unsafe header "Content-Length"。
 
    既然ajax跨域中直接设置请求头是不允许的,那么我们就必须在ajax请求发出之前就应该设置cookie,然后ajax请求时会自动去填充请求头header内容(其中cookie内容会自动从硬盘中读取)。同时服务器端也要做些返回头的修改:
        response.setHeader("Access-Control-Allow-Credentials","true");

前端ajax请求可以设置如下:
    document.cookie=“pin=test;domain=test.com;”;
    $.ajax({
       url:_url,
       type:"get",
       data:"",
        dataType:"json",
       xhrFields: {
          withCredentials: true
       },
       crossDomain: true,
   })

注意以上写法中关于cookie的domain.这要求cookie的域必须是两个子域的顶级域,才能被双方认可。

如果网站A是:a.test.cn, 网站B是:b.test.com,那么无论如何都不能实现A携带A的会话cookie发送ajax请求到网站B上(B端设置了Access-Control-Allow-Origin="test.cn",携带的始终是B的会话cookie)。
————————————————
版权声明:本文为CSDN博主「剑舞青城」的原创文章,遵循CC 4.0 BY-SA版权协议,转载请附上原文出处链接及本声明。
原文链接:https://blog.csdn.net/qq_29845761/article/details/51897705

转载于:https://blog.csdn.net/qq_29845761/article/details/51897705

               https://www.cnblogs.com/nuccch/p/7875189.html

 

  • 1
    点赞
  • 3
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值