產(chǎn)生跨域問題的原因

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

跨域問題產(chǎn)生的場景

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

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

哪些情況會產(chǎn)生跨域問題

一個網(wǎng)站的網(wǎng)址組成包括協(xié)議名，子域名，主域名，端口號。比如 https://github.com/ ，其中https是協(xié)議名，www是子域名，github是主域名，端口號是80，當(dāng)在在頁面中從一個url請求數(shù)據(jù)時，如果這個url的協(xié)議名、子域名、主域名、端口號任意一個有一個不同，就會產(chǎn)生跨域問題。

即使是在 http://localhost:80/ 頁面請求 http://127.0.0.0:80/ 也會有跨域問題

解決跨域問題

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

使用jsonp

服務(wù)端代理

服務(wù)端設(shè)置Request Header頭中Access-Control-Allow-Origin為指定可獲取數(shù)據(jù)的域名

jsonp的解決方式

json≠jsonp

原理

jsonp解決跨域問題的原理是，瀏覽器的script標(biāo)簽是不受同源策略限制(你可以在你的網(wǎng)頁中設(shè)置script的src屬性問cdn服務(wù)器中靜態(tài)文件的路徑)。那么就可以使用script標(biāo)簽從服務(wù)器獲取數(shù)據(jù)，請求時添加一個參數(shù)為callbakc=?，?號時你要執(zhí)行的回調(diào)方法。

前端實現(xiàn)

以jQuery2.1.3的ajax方法為例

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

僅僅是客戶端使用jsonp請求數(shù)據(jù)是不行的，因為jsonp的請求是放在script標(biāo)簽中的，和普通請求不同的地方在于，它請求到的是一段js代碼，如果服務(wù)端返回了json字符串，那么瀏覽器就會報錯。所以jsonp返回數(shù)據(jù)需要服務(wù)端做一些處理。

服務(wù)端返回數(shù)據(jù)處理

上面說了jsonp的原理是利用script標(biāo)簽來解決跨域，但是script標(biāo)簽是用來獲取js代碼的，那么我們怎么獲取到請求的數(shù)據(jù)呢。

這就需要服務(wù)端做一些判斷，當(dāng)參數(shù)中帶有callback屬性時，返回的type要為application/javascript,把數(shù)據(jù)作為callback的參數(shù)執(zhí)行。下面是jsonp返回的數(shù)據(jù)的格式示例

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

這是express4.12.3關(guān)于jsonp的實現(xiàn)代碼

代碼如下:

// 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 + ' === \'f

更多信息請查看IT技術(shù)專欄