跨域解決方案

爲了下降網站的安全風險，瀏覽器引入了同源策略，同源策略限制了從同一個源加載的文檔或腳本如何與來自另外一個源的資源進行交互，這是一個用於隔離潛在惡意文件的重要安全機制，同源策略必須確保「協議+域名+端口」三者都相同，即便兩個不一樣的域名指向同一個ip地址，也不符合同源策略，不符合同源策略的請求即產生了跨域。但跨域並非瀏覽器限制了請求，而是拒絕接受，也就是說請求會發送到服務器而後從服務器返回，可是瀏覽器拒絕接收。

同源策略限制瞭如下幾種行爲：

• Cookie、LocalStorage和IndexDB沒法讀取；
• DOM和JS對象沒法得到；
• AJAX請求不能發送。

處理跨域問題的方案包括：

JSONP

一般，爲了減輕web服務器的壓力，咱們會把js、css、img等靜態資源分離到另外一臺獨立域名的服務器上，再在html中經過相應的標籤從不一樣的域名下加載靜態資源，這是被瀏覽器容許的，JSONP就是利用瀏覽器的這一漏洞實現跨域。

<script>
    var script = document.createElement('script');
    script.type = 'text/javascript';

    // 傳參並指定回調執行函數爲fn
    script.src = 'http://www.domain.com:8080/login?user=admin&callback=fn';
    document.head.appendChild(script);

    // 回調執行函數
    function fn(res) {
        alert(JSON.stringify(res));
    }
 </script>
複製代碼

服務端返回函數的調用並把數據做爲參數傳遞給瀏覽器：

fn({'status': true, code: 200, message: '成功'})
複製代碼

後臺node實例：

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

server.on('request', function(req, res) {
    var params = qs.parse(req.url.split('?')[1]);
    var fn = params.callback;

    // jsonp返回設置
    res.writeHead(200, { 'Content-Type': 'text/javascript' });
    res.write(fn + '(' + JSON.stringify(params) + ')');

    res.end();
});

server.listen('8080');
console.log('Server is running at port 8080...');
複製代碼

JSONP的缺點：只能實現get請求。

document.domain + iframe

這個方案僅限於主域相同的狀況。

• 父窗口：（www.domain.com/a.html）

<iframe id="iframe" src="http://child.domain.com/b.html"></iframe>
<script>
    document.domain = 'domain.com';
    var str = 'hello child';
</script>
複製代碼

• 子窗口：（child.domain.com/b.html）

<script>
    document.domain = 'domain.com';
    // 獲取父窗口中變量
    alert(window.parent.str);  // hello child
</script>
複製代碼

window.postMessage

window.postMessage()是HTML5 XMLHttpRequest Level 2中的API，它能夠安全的實現跨域通訊。window.postMessage()方法被調用時，會在全部頁面腳本執行以後（在該方法以後設置的事件、以前設置的timeout事件等等）向目標窗口派發一個MessageEvent消息。該MessageEvent消息有四個屬性須要注意： message 屬性表示該message 的類型； data 屬性爲 window.postMessage 的第一個參數；origin 屬性表示調用window.postMessage() 方法時調用頁面的當前狀態； source 屬性記錄調用 window.postMessage() 方法的窗口信息。

• a.html(www.domain1.com/a.html)

<iframe id="iframe" src="http://www.domain2.com/b.html" style="display:none;"></iframe>
<script>
  var iframe = document.getElementById('iframe');
  iframe.onload = function() {
    var data = {
      name: 'aym'
    };
    // 向domain2傳送跨域數據
    iframe.contentWindow.postMessage(JSON.stringify(data), 'http://www.domain2.com');
  };

  // 接受domain2返回數據
  window.addEventListener('message', function(e) {
    alert('data from domain2 ---> ' + e.data);
  }, false);
</script>
複製代碼

• b.html(www.domain2.com/b.html)

<script>
  // 接收domain1的數據
  window.addEventListener('message', function(e) {
    alert('data from domain1 ---> ' + e.data);

    var data = JSON.parse(e.data);
    if (data) {
      data.number = 16;

      // 處理後再發回domain1
      window.parent.postMessage(JSON.stringify(data), 'http://www.domain1.com');
    }
  }, false);
</script>
複製代碼

CORS(跨域資源共享)

普通跨域請求：只服務端設置Access-Control-Allow-Origin便可，前端無須設置，若要帶cookie請求：先後端都須要設置。目前主流瀏覽器都支持CORS（IE8/9須要使用XDomainRequest對象）。

• 前端設置：

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);
    }
};
複製代碼

• 服務端設置：

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...');
複製代碼

WebSocket

確切的說，WebSocket是一種網絡通訊協議，它相對於HTTP的優點在於，客戶端和服務端能夠實現雙向通訊，而HTTP只能是由客戶端發起請求，好比一個實時的聊天室，客戶端沒法知曉服務器是否有新數據，所以只能使用「輪詢」的方式，這種方式無疑有巨大的弊端，WebSocket能很好地解決這些問題。 WebSocket最大的特色是服務器能夠主動向客戶端發送消息，客戶端也能夠主動向服務器發送消息，是真正的雙向平等對話。 它還有以下特色：

• 創建在 TCP 協議之上，服務器端的實現比較容易。
• 與 HTTP 協議有着良好的兼容性。默認端口也是80和443，而且握手階段採用 HTTP 協議，所以握手時不容易屏蔽，能經過各類 HTTP 代理服務器。
• 數據格式比較輕量，性能開銷小，通訊高效。
• 能夠發送文本，也能夠發送二進制數據。
• 沒有同源限制，客戶端能夠與任意服務器通訊。
• 協議標識符是ws（若是加密，則爲wss），服務器網址就是 URL。

客戶端示例：（示例引入了Socket.io）

<div>user input：<input type="text"></div>
<script src="./socket.io.js"></script>
<script>
var socket = io('http://www.domain2.com:8080');

// 鏈接成功處理
socket.on('connect', function() {
    // 監聽服務端消息
    socket.on('message', function(msg) {
        console.log('data from server: ---> ' + msg);
    });

    // 監聽服務端關閉
    socket.on('disconnect', function() {
        console.log('Server socket has closed.');
    });
});

document.getElementsByTagName('input')[0].onblur = function() {
    socket.send(this.value);
};
</script>
複製代碼

服務端示例：

var http = require('http');
var socket = require('socket.io');

// 啓http服務
var server = http.createServer(function(req, res) {
    res.writeHead(200, {
        'Content-type': 'text/html'
    });
    res.end();
});

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

// 監聽socket鏈接
socket.listen(server).on('connection', function(client) {
    // 接收信息
    client.on('message', function(msg) {
        client.send('hello：' + msg);
        console.log('data from client: ---> ' + msg);
    });

    // 斷開處理
    client.on('disconnect', function() {
        console.log('Client socket has closed.');
    });
});
複製代碼