Http 跨域(Cors) 詳解

1.構成跨域的條件(滿足下方任意一個條件則構成跨域)

? ? domain不同(域名或者ip不同)

? ? 端口不同

? ? 協(xié)議不同(http/https)

給大家展示一個請求頭和響應頭,這是滿足跨域的

請求頭

```

POST http://127.0.0.1:10030/user/login HTTP/1.1

Host: 127.0.0.1:10030

Connection: keep-alive

Content-Length: 33

Pragma: no-cache

Cache-Control: no-cache

Accept: application/json, text/plain, */*

Origin: http://localhost:8080

User-Agent: Mozilla/5.0 (iPhone; CPU iPhone OS 11_0 like Mac OS X) AppleWebKit/604.1.38 (KHTML, like Gecko) Version/11.0 Mobile/15A372 Safari/604.1

Content-Type: application/x-www-form-urlencoded

Referer: http://localhost:8080/

Accept-Encoding: gzip, deflate, br

Accept-Language: zh-CN,zh;q=0.9,en-US;q=0.8,en;q=0.7

Cookie: cna=CKV9Ew45tVYCAX1SFKx2d19k; _uab_collina=152896489958250435552525; _umdata=65F7F3A2F63DF020E1473F196945E27DBC990F7BBC00081CD2D29B2B4AD9F1FCC05972083687D762CD43AD3E795C914CD2FEBFBF6205958F64E60BC7B372D87F; Hm_lvt_31d8fd22bdec2e7ab9e5855741f0fac1=1541048271,1541503268,1542598403,1543222019; SESSION=NDllODZlMWQtODk5ZC00MDg3LThiN2ItNGM0MTRlMjZlOTFm

phone=15555555555&password=111111

```

響應頭

```

HTTP/1.1 200

Vary: Origin

Vary: Access-Control-Request-Method

Vary: Access-Control-Request-Headers

Access-Control-Allow-Origin: http://localhost:8080

Access-Control-Allow-Credentials: true

Set-Cookie: rememberMe=deleteMe; Path=/; Max-Age=0; Expires=Tue, 01-Jan-2019 06:44:30 GMT

Content-Type: application/json;charset=UTF-8

Transfer-Encoding: chunked

Date: Wed, 02 Jan 2019 06:44:30 GMT

103

{"data":{"id":2,"name":null,"nickName":"15555555555","email":null}

0

```

詳解

首先請求頭中需要設置,這個是設置跨域的的協(xié)議,domain 和端口,也就是瀏覽器地址的欄的根路徑

```

Origin: http://localhost:8080

```

服務器獲取到這個請求頭之后開始進行校驗校驗成功后,設置響應頭

Access-Control-Allow-Origin 參數(shù)建議不要設置為 *? 設置為 * 的話,其他的請求時則不會帶上 Cookie

```

Access-Control-Allow-Origin: http://localhost:8080

Access-Control-Allow-Credentials: true

```

將這個響應頭設置好返回給瀏覽器,就達到跨域的效果了

其他和跨域有關的響應頭

```

//預檢結果緩存時間,也就是上面說到的緩存啦

'Access-Control-Max-Age: 1800'

//允許的請求類型

'Access-Control-Allow-Methods:GET,POST,PUT,POST'

//允許的請求頭字段

'Access-Control-Allow-Headers:x-requested-with,content-type'

```

參考鏈接 https://developer.mozilla.org/zh-CN/docs/Web/HTTP/Access_control_CORS

?著作權歸作者所有,轉載或內容合作請聯(lián)系作者
  • 序言:七十年代末于樟,一起剝皮案震驚了整個濱河市,隨后出現(xiàn)的幾起案子序仙,更是在濱河造成了極大的恐慌,老刑警劉巖痊夭,帶你破解...
    沈念sama閱讀 217,406評論 6 503
  • 序言:濱河連續(xù)發(fā)生了三起死亡事件,死亡現(xiàn)場離奇詭異塞颁,居然都是意外死亡过咬,警方通過查閱死者的電腦和手機大渤,發(fā)現(xiàn)死者居然都...
    沈念sama閱讀 92,732評論 3 393
  • 文/潘曉璐 我一進店門,熙熙樓的掌柜王于貴愁眉苦臉地迎上來掸绞,“玉大人泵三,你說我怎么就攤上這事∠蔚В” “怎么了烫幕?”我有些...
    開封第一講書人閱讀 163,711評論 0 353
  • 文/不壞的土叔 我叫張陵,是天一觀的道長敞映。 經(jīng)常有香客問我较曼,道長,這世上最難降的妖魔是什么振愿? 我笑而不...
    開封第一講書人閱讀 58,380評論 1 293
  • 正文 為了忘掉前任捷犹,我火速辦了婚禮,結果婚禮上冕末,老公的妹妹穿的比我還像新娘伏恐。我一直安慰自己,他們只是感情好栓霜,可當我...
    茶點故事閱讀 67,432評論 6 392
  • 文/花漫 我一把揭開白布。 她就那樣靜靜地躺著横蜒,像睡著了一般胳蛮。 火紅的嫁衣襯著肌膚如雪。 梳的紋絲不亂的頭發(fā)上丛晌,一...
    開封第一講書人閱讀 51,301評論 1 301
  • 那天仅炊,我揣著相機與錄音,去河邊找鬼澎蛛。 笑死抚垄,一個胖子當著我的面吹牛,可吹牛的內容都是我干的谋逻。 我是一名探鬼主播呆馁,決...
    沈念sama閱讀 40,145評論 3 418
  • 文/蒼蘭香墨 我猛地睜開眼,長吁一口氣:“原來是場噩夢啊……” “哼毁兆!你這毒婦竟也來了浙滤?” 一聲冷哼從身側響起,我...
    開封第一講書人閱讀 39,008評論 0 276
  • 序言:老撾萬榮一對情侶失蹤气堕,失蹤者是張志新(化名)和其女友劉穎纺腊,沒想到半個月后畔咧,有當?shù)厝嗽跇淞掷锇l(fā)現(xiàn)了一具尸體,經(jīng)...
    沈念sama閱讀 45,443評論 1 314
  • 正文 獨居荒郊野嶺守林人離奇死亡揖膜,尸身上長有42處帶血的膿包…… 初始之章·張勛 以下內容為張勛視角 年9月15日...
    茶點故事閱讀 37,649評論 3 334
  • 正文 我和宋清朗相戀三年誓沸,在試婚紗的時候發(fā)現(xiàn)自己被綠了。 大學時的朋友給我發(fā)了我未婚夫和他白月光在一起吃飯的照片壹粟。...
    茶點故事閱讀 39,795評論 1 347
  • 序言:一個原本活蹦亂跳的男人離奇死亡拜隧,死狀恐怖,靈堂內的尸體忽然破棺而出煮寡,到底是詐尸還是另有隱情虹蓄,我是刑警寧澤,帶...
    沈念sama閱讀 35,501評論 5 345
  • 正文 年R本政府宣布幸撕,位于F島的核電站薇组,受9級特大地震影響,放射性物質發(fā)生泄漏坐儿。R本人自食惡果不足惜律胀,卻給世界環(huán)境...
    茶點故事閱讀 41,119評論 3 328
  • 文/蒙蒙 一、第九天 我趴在偏房一處隱蔽的房頂上張望貌矿。 院中可真熱鬧炭菌,春花似錦、人聲如沸逛漫。這莊子的主人今日做“春日...
    開封第一講書人閱讀 31,731評論 0 22
  • 文/蒼蘭香墨 我抬頭看了看天上的太陽酌毡。三九已至克握,卻和暖如春,著一層夾襖步出監(jiān)牢的瞬間枷踏,已是汗流浹背菩暗。 一陣腳步聲響...
    開封第一講書人閱讀 32,865評論 1 269
  • 我被黑心中介騙來泰國打工, 沒想到剛下飛機就差點兒被人妖公主榨干…… 1. 我叫王不留旭蠕,地道東北人停团。 一個月前我還...
    沈念sama閱讀 47,899評論 2 370
  • 正文 我出身青樓,卻偏偏與公主長得像掏熬,于是被迫代替她去往敵國和親佑稠。 傳聞我的和親對象是個殘疾皇子,可洞房花燭夜當晚...
    茶點故事閱讀 44,724評論 2 354

推薦閱讀更多精彩內容

  • 什么是跨域 跨域孽江,是指瀏覽器不能執(zhí)行其他網(wǎng)站的腳本讶坯。它是由瀏覽器的同源策略造成的,是瀏覽器對JavaScript實...
    Yaoxue9閱讀 1,299評論 0 6
  • 什么是跨域 跨域岗屏,是指瀏覽器不能執(zhí)行其他網(wǎng)站的腳本辆琅。它是由瀏覽器的同源策略造成的漱办,是瀏覽器對JavaScript實...
    他方l閱讀 1,064評論 0 2
  • 題目1.什么是同源策略? 同源策略(Same origin Policy): 瀏覽器出于安全方面的考慮,只允許與本...
    FLYSASA閱讀 1,721評論 0 6
  • 1.同源策略(Same origin Policy) 瀏覽器出于安全方面的考慮婉烟,只允許與本域下的接口交互娩井。不同源的...
    好奇男孩閱讀 332評論 0 2
  • 什么是跨域 跨域,是指瀏覽器不能執(zhí)行其他網(wǎng)站的腳本似袁。它是由瀏覽器的同源策略造成的洞辣,是瀏覽器對JavaScript實...
    HeroXin閱讀 836評論 0 4