JS 跨域緣由及其解決方案

產生跨域問題的緣由

跨域問題是瀏覽器同源策略限制，當前域名的js只能讀取同域下的窗口屬性。

跨域問題產生的場景

當要在在頁面中使用js獲取其餘網站的數據時，就會產生跨域問題，好比在網站中使用ajax請求其餘網站的天氣、快遞或者其餘數據接口時以及hybrid app中請求數據，瀏覽器就會提示如下錯誤。這種場景下就要解決js的跨域問題。

XMLHttpRequest cannot load http://你請求的域名. No 'Access-Control-Allow-Origin' header is present on the requested resource. Origin 'http://當前頁的域名' is therefore not allowed access.

哪些狀況會產生跨域問題

一個網站的網址組成包括協議名，子域名，主域名，端口號。好比 https://github.com/ ，其中https是協議名，www是子域名，github是主域名，端口號是80，當在在頁面中從一個url請求數據時，若是這個url的協議名、子域名、主域名、端口號任意一個有一個不一樣，就會產生跨域問題。
即便是在 http://localhost:80/ 頁面請求 http://127.0.0.1:80/ 也會有跨域問題

解決跨域問題

解決跨域問題有如下一種方式

• 使用jsonp
• 服務端代理
• 服務端設置Request Header頭中Access-Control-Allow-Origin爲指定可獲取數據的域名

jsonp的解決方式

json≠jsonp

原理

jsonp解決跨域問題的原理是，瀏覽器的script標籤是不受同源策略限制(你能夠在你的網頁中設置script的src屬性問cdn服務器中靜態文件的路徑)。那麼就可使用script標籤從服務器獲取數據，請求時添加一個參數爲callbakc=?，?號時你要執行的回調方法。

前端實現

以jQuery2.1.3的ajax方法爲例

javascript$.ajax({
    url:"",
    dataType:"jsonp",
    data:{
        params:""
        }
}).done(function(data){
    //dosomething..
})

僅僅是客戶端使用jsonp請求數據是不行的，由於jsonp的請求是放在script標籤中的，和普通請求不一樣的地方在於，它請求到的是一段js代碼，若是服務端返回了json字符串，那麼瀏覽器就會報錯。因此jsonp返回數據須要服務端作一些處理。

服務端返回數據處理

上面說了jsonp的原理是利用script標籤來解決跨域，可是script標籤是用來獲取js代碼的，那麼咱們怎麼獲取到請求的數據呢。

這就須要服務端作一些判斷，當參數中帶有callback屬性時，返回的type要爲application/javascript,把數據做爲callback的參數執行。下面是jsonp返回的數據的格式示例

javascript/**/ typeof jQuery21307270454438403249_1428044213638 === 'function' && jQuery21307270454438403249_1428044213638({"code":1,"msg":"success","data":{"test":"test"}});

這是express4.12.3關於jsonp的實現代碼

javascript// jsonp
  if (typeof callback === 'string' && callback.length !== 0) {
    this.charset = 'utf-8';
    this.set('X-Content-Type-Options', 'nosniff');
    this.set('Content-Type', 'text/javascript');

    // restrict callback charset
    callback = callback.replace(/[^\[\]\w$.]/g, '');

    // replace chars not allowed in JavaScript that are in JSON
    body = body
      .replace(/\u2028/g, '\\u2028')
      .replace(/\u2029/g, '\\u2029');

    // the /**/ is a specific security mitigation for "Rosetta Flash JSONP abuse"
    // the typeof check is just to reduce client error noise
    body = '/**/ typeof ' + callback + ' === \'function\' && ' + callback + '(' + body + ');';
  }

服務端設置Access-Control-Allow-Origin

這種方式只要服務端把response的header頭中設置Access-Control-Allow-Origin爲制定可請求當前域名下數據的域名便可。通常狀況下設爲便可。這樣客戶端就不須要使用jsonp來獲取數據。
關於Access-Control-Allow-Origin設爲是否會有安全問題，知乎上有個討論。

http://www.zhihu.com/question/22992229

瀏覽器支持

Access-Control-Allow-Origin是html5新增的一項標準，IE10如下是不支持的，因此若是產品面向的是PC端，就要使用服務端代理或jsonp。