跨域(Cross-Domain)之痛

我們只想做一個安分的軟件“工程師”挤聘,只想專注于業(yè)務(wù)邏輯(因為老板只盯著他所關(guān)注的功能、版本衣盾、優(yōu)化)寺旺,不立志成為計算機“科學家”,解決那些底層的雨效、不兼容、各種奇葩的實現(xiàn)(因為老板不覺得自己應(yīng)該給這些“科研”工作出經(jīng)費)废赞。于是徽龟,從一開始,我們就本著“只要實現(xiàn)功能就行”的不科學態(tài)度唉地,在基礎(chǔ)知識上沒有系統(tǒng)學習過……直到幾次讓人非常沮喪据悔、非常被動的情況發(fā)生,我們才不得不審視一直以來的“短視”耘沼。

跨域(Cross-Domain)之痛(二)

jsonp存在的問題

硬問題:
  1. 不支持POST方法
    jsonp基于GET方法實現(xiàn)极颓,并沒有用XMLHttpRequest,不是真正的ajax請求群嗤。所以菠隆,僅有jsonp是不夠的,服務(wù)端無論如何都免不了支持CORS狂秘。
  2. 欲捕獲服務(wù)端返回的500等錯誤骇径,捕獲不到。jquery有文檔明確說明:(function error) This handler is not called for cross-domain script and cross-domain JSONP requests. 我還不甚了了why
軟問題:

服務(wù)端需要支持兩種方式者春,而這種機制性的代碼又不常改(除非出問題)破衔。平時前端、后端都專注業(yè)務(wù)邏輯钱烟,前端沒毛病晰筛,后端同學是萬萬不會想到這個代碼嫡丙。某一天,前端發(fā)現(xiàn)了問題读第,思量 “記得xx點原來是可以的啊曙博,怎么今天不行了……”,又是一番google卦方,一番嘗試羊瘩,結(jié)果發(fā)現(xiàn):哦,原來是jsonp可以盼砍,json不行(要么就是json可以尘吗,jsonp不行)。這就是記憶的局限浇坐。畢竟睬捶,看不到對方代碼,記憶中是支持的近刘,卻常常忽略了“兩種方式”這件事擒贸。


注意:下面說的都是棄用jsonp后遇到的問題

ajax帶不上cookie

這樣子做:

1) Add the following to your ajax request.
xhrFields: { withCredentials:true }

2) Add the following to your response headers for resources in the different subdomain.
Access-Control-Allow-Origin : http://original.mydomain.com
Access-Control-Allow-Credentials : true

The XMLHttpRequest.withCredentials property is a Boolean that indicates whether or not cross-site Access-Control requests should be made using credentials such as cookies, authorization headers or TLS client certificates. Setting withCredentials has no effect on same-site requests.

詳見 StackOverflow

IE8/IE9不支持ajax

我一直以為XMLHttpRequest是瀏覽器的標配,事實告訴我觉渴,真是沒見過世面介劫!人家偉大的IE8/IE9就不標配,有自己的XDomainRequest

幸好案淋,有人為jquery寫了插件jQuery-ajaxTransport-XDomainRequest座韵。在引入jquery.js之后引入它,$.ajax的地方不用改踢京,齊活誉碴。

強調(diào)一下,如果你引入了插件瓣距,發(fā)現(xiàn)仍然是返回500錯誤黔帕,請確認返回頭中有Access-Control-Allow-Origin

CORS requires the Access-Control-Allow-Origin header to be present in the AJAX response from the server.

我在這里費了好半天勁蹈丸。因在我的印象中成黄,我們一直是返回這個header的,否則在chrome逻杖、safari上早該有問題了慨默。所以,在我讀插件的文檔時看到這句話弧腥,很自信地認為“恩厦取,這步我們已經(jīng)有了”。當我懷疑是插件沒加載成管搪、沒執(zhí)行虾攻、插件不靠譜等等各種嘗試后铡买,有點灰心的時候,不經(jīng)意發(fā)現(xiàn)霎箍,返回的header中真的是沒有Access-Control-Allow-Origin奇钞。為何呢?明明是服務(wù)端已加了的啊漂坏。

去查一下php代碼景埃,發(fā)現(xiàn)我們是從請求header中的Referer中取出http://domain.com:port/ 來生成Access-Control-Allow-Origin(沒有Referer則沒辦法生成)《ケ穑可現(xiàn)在IE的請求中沒有Referer谷徙,倒是有個Origin。再去查查標準文檔 w2c驯绎,才知道完慧,原來Origin才是正確的姿勢。

改了php代碼剩失,世界安靜了屈尼。

后來,我終于在眼淚中明白拴孤,有些軟件脾歧,總那么不可愛

然而,IE8/IE9問題只是“貌似”解決了演熟。當時應(yīng)該也是沒有全面測試鞭执,后來發(fā)現(xiàn),登錄不了绽媒。原來是帶不上Cookie蚕冬!也就是說免猾,XDomainRequest實現(xiàn)的有局限是辕。參見:微軟某程序員的一篇blog

看來猎提,如果需要兼容IE8获三,是不能完美實現(xiàn)CORS的。

最終的最終锨苏,我們還是無奈地選擇了“js中訪問同域名下的php疙教,nginx做代理(將請求轉(zhuǎn)發(fā)給api)”這種方式。

refs:
http://stackoverflow.com/questions/2870371/why-is-jquerys-ajax-method-not-sending-my-session-cookie
http://www.w3.org/TR/cors/
https://en.wikipedia.org/wiki/Cross-origin_resource_sharing
http://bob.ippoli.to/archives/2005/12/05/remote-json-jsonp/
https://en.wikipedia.org/wiki/JSONP

最后編輯于
?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請聯(lián)系作者
  • 序言:七十年代末伞租,一起剝皮案震驚了整個濱河市贞谓,隨后出現(xiàn)的幾起案子,更是在濱河造成了極大的恐慌葵诈,老刑警劉巖裸弦,帶你破解...
    沈念sama閱讀 222,590評論 6 517
  • 序言:濱河連續(xù)發(fā)生了三起死亡事件祟同,死亡現(xiàn)場離奇詭異,居然都是意外死亡理疙,警方通過查閱死者的電腦和手機晕城,發(fā)現(xiàn)死者居然都...
    沈念sama閱讀 95,157評論 3 399
  • 文/潘曉璐 我一進店門,熙熙樓的掌柜王于貴愁眉苦臉地迎上來窖贤,“玉大人砖顷,你說我怎么就攤上這事≡呶啵” “怎么了滤蝠?”我有些...
    開封第一講書人閱讀 169,301評論 0 362
  • 文/不壞的土叔 我叫張陵,是天一觀的道長槽奕。 經(jīng)常有香客問我几睛,道長,這世上最難降的妖魔是什么粤攒? 我笑而不...
    開封第一講書人閱讀 60,078評論 1 300
  • 正文 為了忘掉前任所森,我火速辦了婚禮,結(jié)果婚禮上夯接,老公的妹妹穿的比我還像新娘焕济。我一直安慰自己,他們只是感情好盔几,可當我...
    茶點故事閱讀 69,082評論 6 398
  • 文/花漫 我一把揭開白布晴弃。 她就那樣靜靜地躺著,像睡著了一般逊拍。 火紅的嫁衣襯著肌膚如雪上鞠。 梳的紋絲不亂的頭發(fā)上,一...
    開封第一講書人閱讀 52,682評論 1 312
  • 那天芯丧,我揣著相機與錄音芍阎,去河邊找鬼。 笑死缨恒,一個胖子當著我的面吹牛谴咸,可吹牛的內(nèi)容都是我干的。 我是一名探鬼主播骗露,決...
    沈念sama閱讀 41,155評論 3 422
  • 文/蒼蘭香墨 我猛地睜開眼岭佳,長吁一口氣:“原來是場噩夢啊……” “哼!你這毒婦竟也來了萧锉?” 一聲冷哼從身側(cè)響起珊随,我...
    開封第一講書人閱讀 40,098評論 0 277
  • 序言:老撾萬榮一對情侶失蹤,失蹤者是張志新(化名)和其女友劉穎柿隙,沒想到半個月后叶洞,有當?shù)厝嗽跇淞掷锇l(fā)現(xiàn)了一具尸體辨赐,經(jīng)...
    沈念sama閱讀 46,638評論 1 319
  • 正文 獨居荒郊野嶺守林人離奇死亡,尸身上長有42處帶血的膿包…… 初始之章·張勛 以下內(nèi)容為張勛視角 年9月15日...
    茶點故事閱讀 38,701評論 3 342
  • 正文 我和宋清朗相戀三年京办,在試婚紗的時候發(fā)現(xiàn)自己被綠了掀序。 大學時的朋友給我發(fā)了我未婚夫和他白月光在一起吃飯的照片。...
    茶點故事閱讀 40,852評論 1 353
  • 序言:一個原本活蹦亂跳的男人離奇死亡惭婿,死狀恐怖不恭,靈堂內(nèi)的尸體忽然破棺而出,到底是詐尸還是另有隱情财饥,我是刑警寧澤换吧,帶...
    沈念sama閱讀 36,520評論 5 351
  • 正文 年R本政府宣布,位于F島的核電站钥星,受9級特大地震影響沾瓦,放射性物質(zhì)發(fā)生泄漏。R本人自食惡果不足惜谦炒,卻給世界環(huán)境...
    茶點故事閱讀 42,181評論 3 335
  • 文/蒙蒙 一贯莺、第九天 我趴在偏房一處隱蔽的房頂上張望。 院中可真熱鬧宁改,春花似錦缕探、人聲如沸。這莊子的主人今日做“春日...
    開封第一講書人閱讀 32,674評論 0 25
  • 文/蒼蘭香墨 我抬頭看了看天上的太陽。三九已至谜喊,卻和暖如春潭兽,著一層夾襖步出監(jiān)牢的瞬間,已是汗流浹背斗遏。 一陣腳步聲響...
    開封第一講書人閱讀 33,788評論 1 274
  • 我被黑心中介騙來泰國打工山卦, 沒想到剛下飛機就差點兒被人妖公主榨干…… 1. 我叫王不留,地道東北人最易。 一個月前我還...
    沈念sama閱讀 49,279評論 3 379
  • 正文 我出身青樓怒坯,卻偏偏與公主長得像炫狱,于是被迫代替她去往敵國和親藻懒。 傳聞我的和親對象是個殘疾皇子,可洞房花燭夜當晚...
    茶點故事閱讀 45,851評論 2 361

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