深入跨域問題(1) - 初識 CORS 跨域資源共享

閱讀目錄:

深入跨域問題(1) - 初識 CORS 跨域資源共享(本篇)

深入跨域問題(2) - 利用 CORS 解決跨域

深入跨域問題(3) - 利用 JSONP 解決跨域

深入跨域問題(4) - 利用 代理服務器 解決跨域

跨域問題寺董,一直困擾我們非常久,特別是在前后端分離開發(fā)條件下,幾乎一定會遇到跨域問題。

跨域也有很多解決方案:JSONP,iframe,代理,反向代理等坟乾。

如果是與后臺一起開發(fā)過的小伙伴,肯定對這一句感到熟悉:

Access-Control-Allow-Origin: *

其實蝶防,這就已經(jīng)屬于 CORS 跨域資源共享的內(nèi)容了甚侣,但是,前端和后臺交互的時候仍然存在很多很多問題间学。

這些問題的主要原因:你和后臺并不熟悉 CORS 殷费,不僅后端需要了解 CORS ,前端也要非常熟悉 5秃O晗邸!

在這篇文章里面嘿悬,我主要闡述 CORS 跨域資源共享实柠,在后續(xù)文章中,我會采用 node 模擬出跨域并解決善涨。

image

產(chǎn)生跨域的條件

瀏覽器安全的基石是 同源策略窒盐,什么是同源策略呢茶行?言簡意賅,就是三個相同:

  • 協(xié)議相同登钥。
  • 域名相同。
  • 端口相同娶靡。

這三者相同的情況下牧牢,才被稱作 “同源”,同源策略姿锭,可以保證你的服務器的接口是隱私的塔鳍。

CORS 跨域資源共享就是指,在這個三者 一個或者多個不同 的情況下呻此,允許 跨源 獲取服務器接口的內(nèi)容轮纫。

但是,既然要突破 同源策略 焚鲜,那么 CORS 必須遵守一定 規(guī)則 來保證服務器的數(shù)據(jù)安全掌唾。

跨域的例子:

端口不同:

假設,你的電腦現(xiàn)在有開啟了兩個服務器忿磅,分別在 不同的端口

http://localhost:8080/index.html    // 發(fā)送 ajax 請求

http://localhost:3000   //      提供接口

在這里糯彬,這個服務器并沒有遵守 同源策略 了,此時葱她,就產(chǎn)生了跨域問題撩扒。

協(xié)議不同:

舉一個很常見的例子,雙擊打開一個 html 文件吨些,你會看到瀏覽器上你會看到:

file:///Users/xxx/Documents/index.html  // 客戶端

http://localhost:3000   //  服務器

這就是簡單的 協(xié)議不同 的跨域例子搓谆,這個例子,也是我們最好實現(xiàn)的例子 豪墅。泉手。。

域名不同:

這個更明顯了:

https://www.xxx.com/index.html  // 客戶端

https://www.yyy.com     // 服務器

這個例子偶器,我想不用過多解釋了吧螃诅。

image

CORS 資源共享

我想,大多數(shù)人在看 MDN 文檔上面的解釋時状囱,也會一臉懵逼吧术裸,感覺很有道理的樣子但不知道該怎么用。

說白了亭枷,CORS 只是在 HTTP 協(xié)議內(nèi)部袭艺,新增了若干個 首部字段 ,來制定 跨域資源共享 的實現(xiàn) 規(guī)則 叨粘。

這些首部字段猾编,有哪些呢瘤睹??答倡? HTTP訪問控制(CORS) MDN 文檔 轰传。

預請求

此規(guī)則規(guī)定,處于跨域環(huán)境并在下面幾個條件下瘪撇,瀏覽器會發(fā)送兩個請求給服務器获茬;

舉例說明:假設客戶端需要發(fā)起 PUT 請求

  1. 首先,客戶端要發(fā)送 OPTIONS 請求 給服務器倔既。
  2. 在 服務器內(nèi)部恕曲,需要對 OPTIONS 請求 ,做出一些 設定 渤涌,告訴客戶端 是否允許訪問 佩谣。
  3. 客戶端確認服務器允許該方法,最終發(fā)送 PUT 請求实蓬;否則茸俭,拋出錯誤,服務器拒絕訪問此方法安皱。

這種設定保證了服務器的 安全性瓣履,服務器可控制客戶端訪問的內(nèi)容 !A防袖迎!

觸發(fā)預請求有三種情況:

  1. 使用了某些方法,比如說 PUT, DELETE 等腺晾。
  2. Fetch 規(guī)范規(guī)定了對 CORS安全的首部字段集合燕锥,人為設置會觸發(fā)預請求。
  3. Content-Type的值不是text/plain 悯蝉,multipart/form-data归形,application/x-www-form-urlencoded

由于篇幅原因,我并沒有完全列出鼻由,請查閱 HTTP訪問控制(CORS) MDN文檔暇榴。

非預請求:

此規(guī)則規(guī)定,在跨域產(chǎn)生的條件下蕉世,某些請求和方法蔼紧,不需要預請求,只發(fā)送一個請求就行了狠轻。

簡單的請求比如說:GET, POST, HEAD 這三個方法奸例。

思考題目:

現(xiàn)在,有一個場景向楼,我們需要用 ajax 發(fā)送一個請求查吊,請問是否能夠觸發(fā)預請求 ?

例子1:

var data = { name: 'BruceLee', password: '123456' };

$.ajax({
    url: "http://localhost:3000",
    type: "get",
    success: function (result) {
        console.log(result);
    },
    error: function (msg) {
        console.log(msg);
    }
})

例子2:

var data = { name: 'BruceLee', password: '123456' };

$.ajax({
    url: "http://localhost:3000",
    type: "post",
    success: function (result) {
        console.log(result);
    },
    error: function (msg) {
        console.log(msg);
    }
})

例子3:

var data = { name: 'BruceLee', password: '123456' };

$.ajax({
    url: "http://localhost:3000",
    type: "post",
    data: JSON.stringify(data),
    contentType: 'application/json;charset=utf-8',
    success: function (result) {
        console.log(result);
    },
    error: function (msg) {
        console.log(msg);
    }
})

仔細分析上述的三個例子谐区,例子很簡單,作為前端的你逻卖,會對 CORS 擁有新的認知宋列。

image

參考與鳴謝:

十分感謝上述參考鏈接的作者,他們的文章是十分有深度和值得多多研讀的仇参。

最后編輯于
?著作權(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é)果婚禮上裂七,老公的妹妹穿的比我還像新娘皆看。我一直安慰自己,他們只是感情好背零,可當我...
    茶點故事閱讀 69,116評論 6 398
  • 文/花漫 我一把揭開白布悬蔽。 她就那樣靜靜地躺著,像睡著了一般捉兴。 火紅的嫁衣襯著肌膚如雪蝎困。 梳的紋絲不亂的頭發(fā)上录语,一...
    開封第一講書人閱讀 52,713評論 1 312
  • 那天,我揣著相機與錄音禾乘,去河邊找鬼澎埠。 笑死,一個胖子當著我的面吹牛始藕,可吹牛的內(nèi)容都是我干的蒲稳。 我是一名探鬼主播,決...
    沈念sama閱讀 41,170評論 3 422
  • 文/蒼蘭香墨 我猛地睜開眼伍派,長吁一口氣:“原來是場噩夢啊……” “哼江耀!你這毒婦竟也來了?” 一聲冷哼從身側(cè)響起诉植,我...
    開封第一講書人閱讀 40,116評論 0 277
  • 序言:老撾萬榮一對情侶失蹤祥国,失蹤者是張志新(化名)和其女友劉穎,沒想到半個月后晾腔,有當?shù)厝嗽跇淞掷锇l(fā)現(xiàn)了一具尸體舌稀,經(jīng)...
    沈念sama閱讀 46,651評論 1 320
  • 正文 獨居荒郊野嶺守林人離奇死亡,尸身上長有42處帶血的膿包…… 初始之章·張勛 以下內(nèi)容為張勛視角 年9月15日...
    茶點故事閱讀 38,714評論 3 342
  • 正文 我和宋清朗相戀三年灼擂,在試婚紗的時候發(fā)現(xiàn)自己被綠了壁查。 大學時的朋友給我發(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
  • 正文 我出身青樓爵憎,卻偏偏與公主長得像慨亲,于是被迫代替她去往敵國和親。 傳聞我的和親對象是個殘疾皇子宝鼓,可洞房花燭夜當晚...
    茶點故事閱讀 45,870評論 2 361

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