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