跨域方案淺析

要說跨域首先了解同源策略：
同源策略，它是由Netscape提出的一個著名的安全策略。
現在所有支持JavaScript 的瀏覽器都會使用這個策略。
所謂同源是指，域名，協議，端口相同。

實現跨域通常用以下三種方法

• JSONP：網頁通過添加一個script元素，向服務器請求JSON數據，這種做法不受同源政策限制

• WebSocket : ws://（非加密）和wss://（加密）作爲協議前綴。該協議不實行同源政策，只要服務器支持，就可以通過它進行跨源通信。

• CORS : CORS需要瀏覽器和服務器同時支持。

那麼爲什麼要實現跨域？看下面的一個例子：
前端代碼：

  var xmlhttp = new XMLHttpRequest()

        if (window.XMLHttpRequest) {
          xmlhttp = new XMLHttpRequest();
        }
        else {
          xmlhttp = new ActiveXObject('Microsoft.XMLHTTP');
        }
        xmlhttp.onreadystatechange = function () {
          if (xmlhttp.readyState === 4 && xmlhttp.status === 200) {
            document.getElementById('my').innerHTML = xmlhttp.responseText
          } else {
            document.getElementById('my').innerHTML = 'failed'
          }
        }
        xmlhttp.open('POST', 'http://localhost:3000/get', true)
        xmlhttp.setRequestHeader('Content-type', 'application/x-www-form-urlencoded')
        xmlhttp.send(data)

後端代碼：

router.post('/get', async (ctx, next) => {

    var
        name = ctx.request.body.name || '',
        password = ctx.request.body.psd || '';
        userdata = await user.get(name);
        uname = userdata[0].name;
        upsd = userdata[0].psd;
    console.log(`signin with database: ${uname}, password: ${upsd}`);
    if (name === uname && password === upsd) {
        ctx.response.body = success;
    } else {
        ctx.response.body = failed;
    }
});

上面的例子是用ajax請求後臺數據。雖然得到了狀態碼200但是卻無法正確獲得數據。原因正是因爲同源策略。同源策略限制的行爲有以下幾種：

（1） Cookie、LocalStorage 和 IndexDB 無法讀取。
（2） DOM 無法獲得。
（3） AJAX 請求不能發送。

此時可以使用提到的解決跨域的方式。這裏討論CROS的實現

整個CORS通信過程，都是瀏覽器自動完成，不需要用戶參與。對於開發者來說，CORS通信與同源的AJAX通信沒有差別，代碼完全一樣。瀏覽器一旦發現AJAX請求跨源，就會自動添加一些附加的頭信息，有時還會多出一次附加的請求，但用戶不會有感覺。
因此，實現CORS通信的關鍵是服務器。只要服務器實現了CORS接口，就可以跨源通信。

瀏覽器直接發出CORS請求。具體來說，就是在頭信息之中，增加一個Origin字段。Origin字段用來說明，本次請求來自哪個源（協議 + 域名 + 端口）。服務器根據這個值，決定是否同意這次請求。
如果Origin指定的源，不在許可範圍內，服務器會返回一個正常的HTTP迴應。瀏覽器發現，這個迴應的頭信息沒有包含Access-Control-Allow-Origin字段（詳見下文），就知道出錯了，從而拋出一個錯誤，被XMLHttpRequest的onerror回調函數捕獲。注意，這種錯誤無法通過狀態碼識別，因爲HTTP迴應的狀態碼有可能是200。
如果Origin指定的域名在許可範圍內，服務器返回的響應，會多出幾個頭信息字段。

（1）Access-Control-Allow-Origin
該字段是必須的。它的值要麼是請求時Origin字段的值，要麼是一個*，表示接受任意域名的請求。
（2）Access-Control-Allow-Credentials
該字段可選。它的值是一個布爾值，表示是否允許發送Cookie。默認情況下，Cookie不包括在CORS請求之中。設爲true，即表示服務器明確許可，Cookie可以包含在請求中，一起發給服務器。這個值也只能設爲true，如果服務器不要瀏覽器發送Cookie，刪除該字段即可。
（3）Access-Control-Expose-Headers
該字段可選。CORS請求時，XMLHttpRequest對象的getResponseHeader()方法只能拿到6個基本字段：Cache-Control、Content-Language、Content-Type、Expires、Last-Modified、Pragma。如果想拿到其他字段，就必須在Access-Control-Expose-Headers裏面指定。上面的例子指定，getResponseHeader(‘FooBar’)可以返回FooBar字段的值。

可以說跨域問題主要在header上下功夫。
在koa中有cros模塊可以實現 代碼如下

var koa = require('koa');
var route = require('koa-route');
var cors = require('koa-cors');
var app = koa();

app.use(cors());

app.use(route.get('/', function() {
  this.body = { msg: 'Hello World!' };
}));

app.listen(3000);

在Express中可以引入cros模塊

var express = require('express')
  , cors = require('cors')
  , app = express();

app.use(cors());

app.get('/products/:id', function(req, res, next){
  res.json({msg: 'This is CORS-enabled for all origins!'});
});

app.listen(80, function(){
  console.log('CORS-enabled web server listening on port 80');
});

跨域成功的話響應頭部會多出跨域相關的字段，如下。

HTTP/1.1 200 OK
Access-Control-Allow-Origin: http://localhost:8080
Access-Control-Allow-Methods: GET,HEAD,PUT,POST,DELETE
Content-Type: text/plain; charset=utf-8
Content-Length: 6
Date: Wed, 02 Aug 2017 13:19:55 GMT
Connection: keep-alive

至此已經用cros解決了跨域問題。