跨域資源共享(CORS)

普通跨域請求:只服務端設定Access-Control-Allow-Origin即可,前端無須設定,若要帶cookie請求:前後端都需要設定。

需注意的是:由於同源策略的限制,所讀取的cookie為跨域請求介面所在域的cookie,而非當前頁。如果想實現當前頁cookie的寫入,可參考下文:七、nginx反向代理中設定proxy_cookie_domain 和 八、NodeJs中介軟體代理中cookieDomainRewrite引數的設定。

目前,所有瀏覽器都支援該功能(IE8+:IE8/9需要使用XDomainRequest物件來支援CORS)),CORS也已經成為主流的跨域解決方案。

1、 前端設定:

1.)原生ajax

// 前端設定是否帶cookie
xhr.withCredentials = true;

示例程式碼:

var xhr = new XMLHttpRequest(); // IE8/9需用window.XDomainRequest相容

// 前端設定是否帶cookie
xhr.withCredentials = true;

xhr.open('post', 'http://www.domain2.com:8080/login', true);
xhr.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded');
xhr.send('user=admin');

xhr.onreadystatechange = function() {
    if (xhr.readyState == 4 && xhr.status == 200) {
        alert(xhr.responseText);
    }
};

2.)jQuery ajax

$.ajax({
    ...
   xhrFields: {
       withCredentials: true    // 前端設定是否帶cookie
   },
   crossDomain: true,   // 會讓請求頭中包含跨域的額外資訊,但不會含cookie
    ...
});

3.)vue框架
在vue-resource封裝的ajax元件中加入以下程式碼:

Vue.http.options.credentials = true

2、 服務端設定:

若後端設定成功,前端瀏覽器控制檯則不會出現跨域報錯資訊,反之,說明沒設成功。

1.)Java後臺:

/*
 * 匯入包:import javax.servlet.http.HttpServletResponse;
 * 介面引數中定義:HttpServletResponse response
 */

// 允許跨域訪問的域名:若有埠需寫全(協議+域名+埠),若沒有埠末尾不用加'/'
response.setHeader("Access-Control-Allow-Origin", "http://www.domain1.com"); 

// 允許前端帶認證cookie:啟用此項後,上面的域名不能為'*',必須指定具體的域名,否則瀏覽器會提示
response.setHeader("Access-Control-Allow-Credentials", "true"); 

2.)Nodejs後臺示例:

var http = require('http');
var server = http.createServer();
var qs = require('querystring');

server.on('request', function(req, res) {
    var postData = '';

    // 資料塊接收中
    req.addListener('data', function(chunk) {
        postData += chunk;
    });

    // 資料接收完畢
    req.addListener('end', function() {
        postData = qs.parse(postData);

        // 跨域後臺設定
        res.writeHead(200, {
            'Access-Control-Allow-Credentials': 'true',     // 後端允許傳送Cookie
            'Access-Control-Allow-Origin': 'http://www.domain1.com',    // 允許訪問的域(協議+域名+埠)
            /* 
             * 此處設定的cookie還是domain2的而非domain1,因為後端也不能跨域寫cookie(nginx反向代理可以實現),
             * 但只要domain2中寫入一次cookie認證,後面的跨域介面都能從domain2中獲取cookie,從而實現所有的介面都能跨域訪問
             */
            'Set-Cookie': 'l=a123456;Path=/;Domain=www.domain2.com;HttpOnly'  // HttpOnly的作用是讓js無法讀取cookie
        });

        res.write(JSON.stringify(postData));
        res.end();
    });
});

server.listen('8080');
console.log('Server is running at port 8080...');