欧美bbbwbbbw肥妇,免费乱码人妻系列日韩,一级黄片

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

 更新時間:2015年04月08日 11:42:32   投稿:hebedich  
這篇文章主要介紹了javascript跨域原因以及解決方案分享,十分的細致全面,有需要的小伙伴可以參考下。

產(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.1:80/ 也會有跨域問題

解決跨域問題

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

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

jsonp的解決方式

json≠jsonp

原理

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

前端實現(xiàn)

以jQuery2.1.3的ajax方法為例

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

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

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

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

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

這就需要服務(wù)端做一些判斷,當(dāng)參數(shù)中帶有callback屬性時,返回的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的實現(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為制定可請求當(dāng)前域名下數(shù)據(jù)的域名即可。一般情況下設(shè)為即可。這樣客戶端就不需要使用jsonp來獲取數(shù)據(jù)。
關(guān)于Access-Control-Allow-Origin設(shè)為是否會有安全問題,知乎上有個討論。

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

瀏覽器支持

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

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

相關(guān)文章

  • bootstrap校驗laydate起止日期聯(lián)動失效問題及解決方法

    bootstrap校驗laydate起止日期聯(lián)動失效問題及解決方法

    這篇文章主要介紹了bootstrap校驗laydate起止日期聯(lián)動失效問題,項目中用到bootstrapValidator,以及l(fā)aydate(by:賢心,插件效果美觀),本文通過實例代碼給大家介紹的非常詳細,需要的朋友可以參考下
    2023-01-01
  • js(jquery)實現(xiàn)無刷新跳轉(zhuǎn)404頁面不存在效果

    js(jquery)實現(xiàn)無刷新跳轉(zhuǎn)404頁面不存在效果

    有時候我們希望臨時讓某個分類或者多個文章不能正常訪問,手動給html文件改名?或者改后臺改程序?太麻煩了。用本文的js代碼很容易實現(xiàn),而且使用得當(dāng)很隱蔽。這篇文章主要介紹了js(jquery)實現(xiàn)無刷新跳轉(zhuǎn)404頁面不存在效果,需要的朋友可以參考下
    2023-04-04
  • JS從非數(shù)組對象轉(zhuǎn)數(shù)組的方法小結(jié)

    JS從非數(shù)組對象轉(zhuǎn)數(shù)組的方法小結(jié)

    這篇文章主要給大家介紹了關(guān)于JS從非數(shù)組對象轉(zhuǎn)數(shù)組的一些方法,分別是Array.prototype.slice.call(obj)、Array.from(obj)、[…obj]和Object.values(obj)等方法的詳細實現(xiàn)方法,需要的朋友可以參考下。
    2018-03-03
  • 原生JS實現(xiàn)H5轉(zhuǎn)盤游戲的示例代碼

    原生JS實現(xiàn)H5轉(zhuǎn)盤游戲的示例代碼

    這篇文章主要介紹了如何利用原生JS實現(xiàn)轉(zhuǎn)盤游戲,可以自由調(diào)整概率。文中的示例代碼講解詳細,對我們學(xué)習(xí)JavaScript有一定幫助,需要的可以參考一下
    2022-03-03
  • nodejs入門詳解(多篇文章結(jié)合)

    nodejs入門詳解(多篇文章結(jié)合)

    Node.js是一套用來編寫高性能網(wǎng)絡(luò)服務(wù)器的JavaScript工具包,一系列的變化由此開始。比較獨特的是,Node.js會假設(shè)你是在POSIX環(huán)境下運行它Linux 或 Mac OS X
    2012-03-03
  • layer的prompt彈出框,點擊回車,觸發(fā)確定事件的方法

    layer的prompt彈出框,點擊回車,觸發(fā)確定事件的方法

    今天小編就為大家分享一篇layer的prompt彈出框,點擊回車,觸發(fā)確定事件的方法,具有很好的參考價值,希望對大家有所幫助。一起跟隨小編過來看看吧
    2019-09-09
  • JavaScript 錯誤處理與調(diào)試經(jīng)驗總結(jié)

    JavaScript 錯誤處理與調(diào)試經(jīng)驗總結(jié)

    在Web開發(fā)過程中,編寫JavaScript程序時或多或少會遇到各種各樣的錯誤,有語法錯誤,邏輯錯誤。如果是一小段代碼,可以通過仔細檢查來排除錯誤,但如果程序稍微復(fù)雜點,調(diào)試JS便成為一個令Web開發(fā)者很頭痛的問題。
    2010-08-08
  • 可以支持多中格式的JS鍵盤

    可以支持多中格式的JS鍵盤

    可以支持多中格式的JS鍵盤...
    2007-05-05
  • 在Swiper內(nèi)如何制作CSS3動畫效果示例代碼

    在Swiper內(nèi)如何制作CSS3動畫效果示例代碼

    這篇文章主要給大家介紹了關(guān)于在Swiper內(nèi)如何制作CSS3動畫效果的相關(guān)資料,文中通過示例代碼介紹的非常詳細,對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值,需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧。
    2017-12-12
  • JavaScript惰性求值的一種實現(xiàn)方法示例

    JavaScript惰性求值的一種實現(xiàn)方法示例

    這篇文章主要給大家介紹了關(guān)于JavaScript惰性求值的一種實現(xiàn)方法,文中通過示例代碼介紹的非常詳細,對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值,需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧
    2019-01-01

最新評論