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携带会话cookie发送ajax请求到网站B上（B端设置了Access-Control-Allow-Origin=”test.cn”，设置为 *的情况没做考究）。