上周做了一個(gè)移動(dòng)端表單提交的頁(yè)面，其中涉及到了跨域問(wèn)題，想來(lái)也是慚愧，因?yàn)橹耙恢倍紱](méi)有遇到過(guò)這個(gè)問(wèn)題，因此都沒(méi)有深入探索過(guò)，只是知道有哪幾種方式，這次終于借這個(gè)機(jī)會(huì)可以把遺留的知識(shí)點(diǎn)補(bǔ)一補(bǔ)了。

1. CORS（Cross-Origin Resource Sharing，跨源資源共享）

【基本思想】：使用自定義的 HTTP 頭部讓瀏覽器與服務(wù)器進(jìn)行溝通，從而決定請(qǐng)求或響應(yīng)是應(yīng)該成功還是失敗。

【實(shí)現(xiàn)方式】：
瀏覽器在發(fā)送請(qǐng)求時(shí)，檢測(cè)到跨域時(shí)，會(huì)自動(dòng)加上一個(gè)額外的 Origin 頭部，其中包含請(qǐng)求頁(yè)面的原信息（協(xié)議、域名和端口），以便服務(wù)器根據(jù)這個(gè)頭部信息來(lái)決定是否給予響應(yīng)。

Origin: http://www.nczonline.net

如果服務(wù)器認(rèn)為這個(gè)請(qǐng)求可以接受，就在 Access-Control-Allow-Origin 頭部中回發(fā)相同的原信息（如果是公共資源，可以回發(fā)“*”）。

Access-Control-Allow-Origin: http://www.nczonline.net

如果沒(méi)有這個(gè)頭部，或者有著頭部但原信息不匹配，瀏覽器就會(huì)駁回請(qǐng)求。

注意：默認(rèn)情況下，請(qǐng)求和響應(yīng)都不包含 cookie 信息。

2. 跨域場(chǎng)景復(fù)原

為了模擬跨域，在自己的本地起了2個(gè)服務(wù)，一個(gè)采用 webpack 充當(dāng)靜態(tài)資源服務(wù)器（webpack 腳手架可參考：scaffoldsForFE），另一個(gè)用 Node 搭建，充當(dāng)接受請(qǐng)求的服務(wù)器，分別給兩個(gè)服務(wù)器分配了不同的端口號(hào)。

Client：http://localhost:8000

var oDiv = document.getElementById('content');

var xhr = new XMLHttpRequest();
xhr.onload = function() {   // 響應(yīng)接收完畢后將觸發(fā) onload 事件
    if (xhr.readyState == 4) {
        if ((xhr.status >= 200 && xhr.status < 300) || xhr.status == 304){
            oDiv.innerHTML = 'Request was success：' + xhr.responseText;
            console.log('Request was success:', xhr.responseText);
        } else {
            oDiv.innerHTML = "Request was unsuccessful: " + xhr.status;
            console.log("Request was unsuccessful： ", xhr.status);
        }
    }
}

xhr.open('get', 'http://localhost:8000', true);  // 不跨域
// xhr.open('get', 'http://localhost:8888', true);  // 跨域
xhr.send();

Server：http://localhost:8888

var http = require('http');

http.createServer(function(req, res) {
    res.writeHead(200, {'Content-Type': 'text/plain'});
    res.write('This is a server test page.');
    res.end();
}).listen(8888);

當(dāng) Client 端向 http://localhost:8000 發(fā)請(qǐng)求時(shí)，不存在跨域，能夠成功返回頁(yè)面信息，此時(shí)的頁(yè)面及其發(fā)請(qǐng)求的 Request Headers 如下：

不存在跨域

當(dāng) Client 端向 http://localhost:8888 請(qǐng)求服務(wù)的時(shí)候，由于存在跨域問(wèn)題，無(wú)法獲得響應(yīng)：

Not Allowed Access

但是其請(qǐng)求的頭部自動(dòng)帶上了 Origin 字段，而且由于是默認(rèn)情況，沒(méi)有帶上 Cookie：

Request Headers

解決的方式是，在 Server 端響應(yīng)的時(shí)候，在 Access-Control-Allow-Origin 頭部中回發(fā)相應(yīng)的原信息：

var http = require('http');

http.createServer(function(req, res) {
    // 設(shè)置響應(yīng)頭部
    res.setHeader('Access-Control-Allow-Origin', 'http://localhost:8000');
    res.writeHead(200, {'Content-Type': 'text/plain'});
    res.write('This is a server test page.');
    res.end();
}).listen(8888);

再重新請(qǐng)求，成功獲得響應(yīng)信息，且請(qǐng)求沒(méi)有帶上 Cookie：

Allowed Access

由于在跨域時(shí)，默認(rèn)情況下是不允許客戶端向服務(wù)器發(fā)送請(qǐng)求時(shí)帶上 Cookie 的，那怎樣才能帶上 Cookie 呢？需要同時(shí)在客戶端和服務(wù)端同時(shí)設(shè)置相應(yīng)字段：

（1）客戶端在請(qǐng)求中打開 withCredentials 屬性，指定某個(gè)請(qǐng)求應(yīng)該發(fā)送憑據(jù)：

var xhr = new XMLHttpRequest();
xhr.withCredentials = true;

（2）服務(wù)端在響應(yīng)頭部中添加 Access-Control-Allow-Credentials 字段，且設(shè)為 true，表明服務(wù)器接受帶憑據(jù)的請(qǐng)求：

res.setHeader('Access-Control-Allow-Credentials', true);

請(qǐng)求帶上 Cookie

如果發(fā)送的是帶憑據(jù)的請(qǐng)求，但服務(wù)器的響應(yīng)中沒(méi)有包含這個(gè)頭部，那么瀏覽器就不會(huì)把響應(yīng)交給 Javascript，則 responseText 是空字符串，status 的值為0，而且會(huì)調(diào)用 onerror() 事件處理程序。

cookie 是可以設(shè)置訪問(wèn)域的，在設(shè)置 cookie 的時(shí)候，設(shè)定了 cookie 的訪問(wèn)域名為一個(gè)頂級(jí)域名，則可以達(dá)到幾個(gè)子域名共享 cookie 的效果，如騰訊網(wǎng) www.qq.com 與微信網(wǎng)頁(yè)版 wx.qq.com 共享了 pac_uid，關(guān)于前端存儲(chǔ)的相關(guān)內(nèi)容，可參考我的另一篇博文：大話前端存儲(chǔ)。

3. 模擬 GET 帶參數(shù) 及 POST 跨域請(qǐng)求

i. GET 帶參數(shù)跨域請(qǐng)求

Client 端：通過(guò)在URL后面加上查詢參數(shù)

var xhr = new XMLHttpRequest();
xhr.withCredentials = true;

xhr.onload = function() {   // 響應(yīng)接收完畢后將觸發(fā) onload 事件
    // 處理 xhr.responseText
}

xhr.open('get', 'http://localhost:8888?method=GET&name=Ruth', true);
xhr.send();

Server 端：處理 GET 請(qǐng)求

var http = require('http');
var url = require('url');

http.createServer(function(req, res) {
    res.setHeader('Access-Control-Allow-Origin', 'http://localhost:8000');
    res.setHeader('Access-Control-Allow-Credentials', true);
    res.writeHead(200, {'Content-Type': 'text/plain'});

    // 解析 url 參數(shù)
    var params = url.parse(req.url, true).query;
    res.write('請(qǐng)求類型：' + params.method);
    res.write('<br />');
    res.write('姓名：' + params.name);
    res.end();
}).listen(8888);

GET with Query

ii. POST 跨域請(qǐng)求

不同于 JSONP，CORS 的好處就是可以讓我們實(shí)現(xiàn) POST 請(qǐng)求。

Client 端發(fā)送信息：

var xhr = new XMLHttpRequest();
xhr.withCredentials = true;

xhr.onload = function() {   // 響應(yīng)接收完畢后將觸發(fā) onload 事件
    // 處理 xhr.responseText
}

xhr.open('post', 'http://localhost:8888', true);
xhr.setRequestHeader("Content-type","application/x-www-form-urlencoded");  // 設(shè)置請(qǐng)求頭
xhr.send('method=POST&name=Ruth'); 

Server 端處理請(qǐng)求：

var http = require('http');
var querystring = require('querystring');

http.createServer(function(req, res) {
    res.setHeader('Access-Control-Allow-Origin', 'http://localhost:8000');
    res.setHeader('Access-Control-Allow-Credentials', true);
    res.writeHead(200, {'Content-Type': 'text/plain'});

    var post = '';
    // 通過(guò)req的data事件監(jiān)聽函數(shù)，每當(dāng)接受到請(qǐng)求體的數(shù)據(jù)，就累加到post變量中
    req.on('data', function(chunk) {
        post += chunk;
    });

    // 在end事件觸發(fā)后，通過(guò)querystring.parse將post解析為真正的POST請(qǐng)求格式，然后向客戶端返回
    req.on('end', function() {
        post = querystring.parse(post);
        res.write('請(qǐng)求類型：' + post.method);
        res.write('<br/>')
        res.write('姓名：' + post.name);
        res.end();
    });
}).listent(8888);

POST request

4. 參考資料

阮一峰-跨域資源共享 CORS 詳解
AJAX POST&跨域 解決方案 - CORS
前端跨域的整理