跨域問題分析

代碼這種東西就是得不斷的使用窝革,如果長時間不用就會生疏。今天偶然間吕座,有人問我跨域的原理和怎么解決聊闯,說了一下,但是總是感覺還是差了點什么米诉,特此溫習(xí)一下菱蔬。

跨域的產(chǎn)生

最根本的原因就是瀏覽器的同源策略,所謂"同源"指的是"三個相同" 協(xié)議相同史侣、域名相同拴泌、端口相同,違反一個就會產(chǎn)生跨域問題惊橱。

請求的分類(簡單請求和非簡單請求)

  • 請求方法是以下三種方法之一:HEAD,GET,POST蚪腐;
  • HTTP的頭信息不超出以下幾種字段:
    Accept
    Accept-Language
    Content-Language
    Last-Event-ID
    Content-Type(只限于三個值application/x-www-form-urlencoded、 multipart/form-data税朴、text/plain)
    凡是不同時滿足上面兩個條件回季,就屬于非簡單請求。

解決跨域問題的方式

  • JSONP 方式
  • 代理請求方式
  • CORS 方式
1正林、JSONP 方式 (只能是 get )
  • 實現(xiàn)原理


    image.png
  • 客戶端網(wǎng)頁通過添加一個

function addScriptTag(src){
    var script = document.createElement('script');
    script.setAttribute('type','text/javascript');
    script.src = src;
    document.body.appendChild(script);
}

window.onload = function (){
    addScriptTag('http://example.com/ip?callback=foo');
}

function foo (data) {
    console.log('response data:'+JSON.stringify(data));
}

請求時泡一,接口地址是作為構(gòu)架出的腳本標(biāo)簽的src的,這樣觅廓,當(dāng)腳本標(biāo)簽構(gòu)建出來時鼻忠,最終的src是接口返回的內(nèi)容;

  • 服務(wù)器端對應(yīng)的接口在返回參數(shù)外面添加函數(shù)包裹層
    foo({ 'test':'testData' });
2杈绸、CORS 方式

cors是一個W3C標(biāo)準(zhǔn)帖蔓,全稱是--跨域資源共享,其實所有的瀏覽器ajax請求都是基于CORS機制的瞳脓,只是我們可能平時并不關(guān)心而已(所以說其實現(xiàn)在CORS解決方案主要是考慮后臺該如何實現(xiàn)的問題 )塑娇。

3、方向代理

通過把本地一個url前綴映射到要跨域訪問的web服務(wù)器上劫侧,就可以實現(xiàn)跨域訪問埋酬。

ajax跨域的表現(xiàn)

  • 第一種
    No 'Access-Control-Allow-Origin' header is present on the requested resource,并且The response had HTTP status code 404
    原因:本次請求時‘非簡單請求’,所以請求會預(yù)先發(fā)送一個options請求;但是服務(wù)器端沒有允許options請求奇瘦,導(dǎo)致無法找到對應(yīng)的接口地址
    解決方案:服務(wù)器允許options請求
  • 第二種
    No 'Access-Control-Allow-Origin' header is present on the requested resource,并且The response had HTTP status code 405
    原因:后臺方法允許OPTIONS請求,但是一些配置文件中(如安全配置),阻止了OPTIONS請求,才會導(dǎo)致這個現(xiàn)象。
    解決方案: 后端關(guān)閉對應(yīng)的安全配置劲弦。
  • 第三種
    No 'Access-Control-Allow-Origin' header is present on the requested resource,并且status 200耳标。
    原因:服務(wù)器端后臺允許OPTIONS請求,并且接口也允許OPTIONS請求,但是頭部匹配時出現(xiàn)不匹配現(xiàn)象;
    解決方案: 后端增加對應(yīng)的頭部支持
  • 第四種
    heade contains multiple values ','
    原因:后臺響應(yīng)的http頭部信息有兩個Access-Control-Allow-Origin:邑跪,服務(wù)器端在項目的配置文件中配置了一次origin次坡,然后在代碼中有手動的添加了一次origin
    解決方案:建議刪除代碼中手動添加的
    ,只用項目配置中的即可
?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請聯(lián)系作者
  • 序言:七十年代末画畅,一起剝皮案震驚了整個濱河市砸琅,隨后出現(xiàn)的幾起案子,更是在濱河造成了極大的恐慌轴踱,老刑警劉巖症脂,帶你破解...
    沈念sama閱讀 222,681評論 6 517
  • 序言:濱河連續(xù)發(fā)生了三起死亡事件,死亡現(xiàn)場離奇詭異淫僻,居然都是意外死亡诱篷,警方通過查閱死者的電腦和手機,發(fā)現(xiàn)死者居然都...
    沈念sama閱讀 95,205評論 3 399
  • 文/潘曉璐 我一進店門雳灵,熙熙樓的掌柜王于貴愁眉苦臉地迎上來棕所,“玉大人,你說我怎么就攤上這事悯辙×帐。” “怎么了?”我有些...
    開封第一講書人閱讀 169,421評論 0 362
  • 文/不壞的土叔 我叫張陵躲撰,是天一觀的道長针贬。 經(jīng)常有香客問我,道長拢蛋,這世上最難降的妖魔是什么坚踩? 我笑而不...
    開封第一講書人閱讀 60,114評論 1 300
  • 正文 為了忘掉前任,我火速辦了婚禮瓤狐,結(jié)果婚禮上瞬铸,老公的妹妹穿的比我還像新娘。我一直安慰自己础锐,他們只是感情好嗓节,可當(dāng)我...
    茶點故事閱讀 69,116評論 6 398
  • 文/花漫 我一把揭開白布。 她就那樣靜靜地躺著皆警,像睡著了一般拦宣。 火紅的嫁衣襯著肌膚如雪。 梳的紋絲不亂的頭發(fā)上,一...
    開封第一講書人閱讀 52,713評論 1 312
  • 那天鸵隧,我揣著相機與錄音绸罗,去河邊找鬼。 笑死豆瘫,一個胖子當(dāng)著我的面吹牛珊蟀,可吹牛的內(nèi)容都是我干的。 我是一名探鬼主播外驱,決...
    沈念sama閱讀 41,170評論 3 422
  • 文/蒼蘭香墨 我猛地睜開眼育灸,長吁一口氣:“原來是場噩夢啊……” “哼!你這毒婦竟也來了昵宇?” 一聲冷哼從身側(cè)響起磅崭,我...
    開封第一講書人閱讀 40,116評論 0 277
  • 序言:老撾萬榮一對情侶失蹤,失蹤者是張志新(化名)和其女友劉穎瓦哎,沒想到半個月后砸喻,有當(dāng)?shù)厝嗽跇淞掷锇l(fā)現(xiàn)了一具尸體,經(jīng)...
    沈念sama閱讀 46,651評論 1 320
  • 正文 獨居荒郊野嶺守林人離奇死亡蒋譬,尸身上長有42處帶血的膿包…… 初始之章·張勛 以下內(nèi)容為張勛視角 年9月15日...
    茶點故事閱讀 38,714評論 3 342
  • 正文 我和宋清朗相戀三年恩够,在試婚紗的時候發(fā)現(xiàn)自己被綠了。 大學(xué)時的朋友給我發(fā)了我未婚夫和他白月光在一起吃飯的照片羡铲。...
    茶點故事閱讀 40,865評論 1 353
  • 序言:一個原本活蹦亂跳的男人離奇死亡蜂桶,死狀恐怖,靈堂內(nèi)的尸體忽然破棺而出也切,到底是詐尸還是另有隱情扑媚,我是刑警寧澤,帶...
    沈念sama閱讀 36,527評論 5 351
  • 正文 年R本政府宣布雷恃,位于F島的核電站疆股,受9級特大地震影響,放射性物質(zhì)發(fā)生泄漏倒槐。R本人自食惡果不足惜旬痹,卻給世界環(huán)境...
    茶點故事閱讀 42,211評論 3 336
  • 文/蒙蒙 一、第九天 我趴在偏房一處隱蔽的房頂上張望讨越。 院中可真熱鬧两残,春花似錦、人聲如沸把跨。這莊子的主人今日做“春日...
    開封第一講書人閱讀 32,699評論 0 25
  • 文/蒼蘭香墨 我抬頭看了看天上的太陽着逐。三九已至崔赌,卻和暖如春意蛀,著一層夾襖步出監(jiān)牢的瞬間,已是汗流浹背健芭。 一陣腳步聲響...
    開封第一講書人閱讀 33,814評論 1 274
  • 我被黑心中介騙來泰國打工县钥, 沒想到剛下飛機就差點兒被人妖公主榨干…… 1. 我叫王不留,地道東北人慈迈。 一個月前我還...
    沈念sama閱讀 49,299評論 3 379
  • 正文 我出身青樓若贮,卻偏偏與公主長得像,于是被迫代替她去往敵國和親吩翻。 傳聞我的和親對象是個殘疾皇子,可洞房花燭夜當(dāng)晚...
    茶點故事閱讀 45,870評論 2 361

推薦閱讀更多精彩內(nèi)容