javascript如何實現跨域請求解決方案

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

[JavaScript] 純文字檢視 複製程式碼
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設為是否會有安全問題，知乎上有個討論。

[JavaScript] 純文字檢視 複製程式碼
http://www.zhihu.com/question/22992229

瀏覽器支援

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