Http 跨域(Cors) 详解

1.构成跨域的条件(满足下方任意一个条件则构成跨域)

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

    端口不同

    协议不同(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

```

详解

首先请求头中需要设置,这个是设置跨域的的协议,domain 和端口,也就是浏览器地址的栏的根路径

```

Origin: http://localhost:8080

```

服务器获取到这个请求头之后开始进行校验校验成功后,设置响应头

Access-Control-Allow-Origin 参数建议不要设置为 *  设置为 * 的话,其他的请求时则不会带上 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

本文如未解决您的问题请添加抖音号：51dongshi（抖音搜索懂视），直接咨询即可。