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