快捷導(dǎo)航

javascript跨域原因以及解決方案分享

更新時(shí)間：2015年04月08日 11:42:32 投稿：hebedich

這篇文章主要介紹了javascript跨域原因以及解決方案分享，十分的細(xì)致全面，有需要的小伙伴可以參考下。

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

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

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

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

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

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

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

解決跨域問(wèn)題

解決跨域問(wèn)題有以下一種方式

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

jsonp的解決方式

json≠jsonp

原理

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

前端實(shí)現(xiàn)

以jQuery2.1.3的ajax方法為例

復(fù)制代碼代碼如下:

$.ajax({

    url:"",

    dataType:"jsonp",

    data:{

        params:""

        }

}).done(function(data){

    //dosomething..

})

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

服務(wù)端返回?cái)?shù)據(jù)處理

上面說(shuō)了jsonp的原理是利用script標(biāo)簽來(lái)解決跨域，但是script標(biāo)簽是用來(lái)獲取js代碼的，那么我們?cè)趺传@取到請(qǐng)求的數(shù)據(jù)呢。

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

復(fù)制代碼代碼如下:

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

這是express4.12.3關(guān)于jsonp的實(shí)現(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 + ' === \'function\' && ' + callback + '(' + body + ');';
 }

服務(wù)端設(shè)置Access-Control-Allow-Origin

這種方式只要服務(wù)端把response的header頭中設(shè)置Access-Control-Allow-Origin為制定可請(qǐng)求當(dāng)前域名下數(shù)據(jù)的域名即可。一般情況下設(shè)為即可。這樣客戶端就不需要使用jsonp來(lái)獲取數(shù)據(jù)。
關(guān)于Access-Control-Allow-Origin設(shè)為是否會(huì)有安全問(wèn)題，知乎上有個(gè)討論。

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

瀏覽器支持

Access-Control-Allow-Origin是html5新增的一項(xiàng)標(biāo)準(zhǔn)，IE10以下是不支持的，所以如果產(chǎn)品面向的是PC端，就要使用服務(wù)端代理或jsonp。

以上所述就是本文的全部?jī)?nèi)容了，希望能夠?qū)Υ蠹覍W(xué)習(xí)javascript跨域有所幫助。

您可能感興趣的文章: