HTTP协议原理（二）（跨域相关）

1、认识http客户端

• 浏览器就是最常用的http客户端，发送请求，还可以看到返回的内容
• f12开发者工具，network
• curl 工具（打开命令行，输入命令可以请求具体内容）
  

2、CORS跨域请求的限制与解决

通俗含义：

比如我要在localhost:8888 访问 localhost：8887的内容，就存在跨域

解决方法

在localhost:8887服务中设置允许跨域访问，前端实现就在请求头中添加

‘ * ’ 表示所有网站都可以跨域请求我的数据

'Access-Control-Allow-Origin': '*'

为了安全起见，可以单个设置，表示只允许http://127.0.0.1:8888访问

'Access-Control-Allow-Origin': 'http://127.0.0.1:8888'

注意点：

• 从浏览器角度并不知道localhost 映射为127.0.0.1 ，所以浏览器认为他们不是同域的，所以访问的时候也需要改成127.0.0.1

• 只能设置一个值，如果想设置可以进行判断

3、CORS跨域预请求验证

跨域默认只允许的方法：

GET、HEAD、POST

允许的 Content-Type
text/plain
multipart/form-data
application/x-www-form-urlencoded

请求头限制
允许的
官方网站：https://fetch.spec.whatwg.org/#cors-safelisted-request-header

其他限制
请求头限制
XMLHttpRequestUpload对象均没有注册任何事件监听器
请求头中没有使用 ReadableStream 对象

使用其他方法/Content-Type、请求头等等都是需要预请求的

预请求

虽然不允许跨域，但是请求是发送了的，也有数据返回，但是浏览器因为安全策略问题将返回忽略了，并抛出了一个错误

浏览器根据header判断返回允许不允许

需要增加一个header，这样请求就成功了

// 允许跨域
'Access-Control-Allow-Origin': '*',
// 允许自定义头，content-type是自定义头的名称
'Access-Control-Allow-Headers':'content-type',
// 允许除默认外的方法
'Access-Control-Request-Method':'POST,Delete,PUT',
// 请求最长时间，以以上这种方式跨域的最长时间，1000毫秒之内不用再发预请求了，可以直接发送PUT请求
'Access-Control-Max-Age':'1000',

Request Method:OPTIONS通过options来获得浏览器的认可，然后再实际发送POST请求