1.構(gòu)成跨域的條件(滿足下方任意一個(gè)條件則構(gòu)成跨域)
? ? domain不同(域名或者ip不同)
? ? 端口不同
? ? 協(xié)議不同(http/https)
給大家展示一個(gè)請(qǐng)求頭和響應(yīng)頭,這是滿足跨域的
請(qǐng)求頭
```
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
```
響應(yīng)頭
```
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
```
詳解
首先請(qǐng)求頭中需要設(shè)置,這個(gè)是設(shè)置跨域的的協(xié)議,domain 和端口,也就是瀏覽器地址的欄的根路徑
```
Origin: http://localhost:8080
```
服務(wù)器獲取到這個(gè)請(qǐng)求頭之后開(kāi)始進(jìn)行校驗(yàn)校驗(yàn)成功后,設(shè)置響應(yīng)頭
Access-Control-Allow-Origin 參數(shù)建議不要設(shè)置為 *? 設(shè)置為 * 的話,其他的請(qǐng)求時(shí)則不會(huì)帶上 Cookie
```
Access-Control-Allow-Origin: http://localhost:8080
Access-Control-Allow-Credentials: true
```
將這個(gè)響應(yīng)頭設(shè)置好返回給瀏覽器,就達(dá)到跨域的效果了
其他和跨域有關(guān)的響應(yīng)頭
```
//預(yù)檢結(jié)果緩存時(shí)間,也就是上面說(shuō)到的緩存啦
'Access-Control-Max-Age: 1800'
//允許的請(qǐng)求類型
'Access-Control-Allow-Methods:GET,POST,PUT,POST'
//允許的請(qǐng)求頭字段
'Access-Control-Allow-Headers:x-requested-with,content-type'
```
參考鏈接 https://developer.mozilla.org/zh-CN/docs/Web/HTTP/Access_control_CORS
