提起HTTP的请求头和响应头总是一头雾水,
今天我们先研究请求头,我就想,如果我们能弄清楚,在我们什么都不做的情况下,一个最简单的HTTP请求会携带哪些请求头,那么复杂的情况无非是在这上面做加法,我们对请求头就能做到心中有数了。
我从以下4个维度测试,看哪些请求头是默认携带的。只发出一个最简单的HTTP请求,别的什么都不做。
1. AJAX请求,不跨域
2. AJAX请求,跨域
3. 服务端发出的HTTP请求
4. 浏览器发出的AJAX之外的其他请求
最终,我想要弄清楚以下几个问题:
1. AJAX发出的的GET、POST、PUT、DELETE、OPTIONS五种请求有什么不同?
2. 原生的XMLHttpRequest请求和axios请求有什么不同?(我习惯用axios)
3. 是否跨域会有什么不同?
4. 服务端发出的GET、POST、PUT、DELETE、OPTIONS五种请求会有什么不同?
5. 服务端发出的请求和AJAX会有什么不同?
我曾经以为只要是访问api接口就都是AJAX,结果在同事问我“你这是AJAX请求还是代理?”时,我用一脸懵逼的表情看着他,他用关怀弱智的表情看着我…
事实是只有浏览器通过XMLHttpRequest对象和Fetch对象发出的请求才叫AJAX,才存在跨域,服务端发出的HTTP请求是不存在跨域的。
我们先来看看6个以sec开头的“奇怪”请求头,这6个请求头不管是否跨域都会携带,只是在跨域时sec-fetch-site的值从same-origin变成了same-site。
搜了一下,3个sec-ch开头的是实验功能,3个sec-fetch开头的是Fetch对象相关的,由于我个人都用不着,所以不在讨论范围。
问题一:AJAX发出的的GET、POST、PUT、DELETE、OPTIONS五种请求有什么不同?
经过测试其他的4种请求头,得出以下结论:
1. 都携带以下8个请求头:host、connection、accept、accept-encoding、accept-language、user-agent、referer、cookie
2. 相比get,其余4种增加了:origin(跨域情况下5种请求都有origin)
3. POST和PUT增加了:'content-length': '0'
问题二:原生的XMLHttpRequest请求和axios请求有什么不同?
测试用axios发出这5种请求,然后对比从XMLHttpRequest发出的请求,得出以下结论:
axios只是把 accept: '*/*' 改成了:accept: 'application/json, text/plain, */*',经过测试在跨域时也是如此,axios只是修改了accept请求头。
问题三:是否跨域会有什么不同?
从另一个域名发起请求,形成了跨域,然后对比5种请求时跨域和非跨域的区别,结果如下:
这5种请求跨域后都是少了cookie,只是在GET时跨域请求多了origin。
再来看服务端发出的请求,我们直接使用axios,就不比较通过http模块发的请求了。这是一个最简单的服务端通过axios发出的GET请求:
问题四:服务端发出的GET、POST、PUT、DELETE、OPTIONS五种请求会有什么不同?
我们先来看一下服务端发出这5种请求会有什么不同?经过测试,结论如下:
1. 都携带以下4个请求头:host、accept、connection、user-agent
2. POST和PUT增加了:'content-type': 'application/x-www-form-urlencoded'和'content-length': '0'
问题五:服务端发出的请求和AJAX会有什么不同?
再来看一下服务端发出的请求和AJAX有什么不同?经过比较,结论如下:
1. 当然是数量,从默认携带8个,变成了只有其中的4个,少了accept-encoding、accept-language、referer、cookie
2. user-agent从浏览器信息变成了axios以及它的版本号
3. connection从keep-alive变成了close
最后,我们看一下浏览器发出的AJAX以外的请求会携带哪些请求头?
经过测试,还是这8个,只不过在浏览器地址栏直接回车时,会少一个referer。
我们现在来看一下这8个请求头的功能吧,现在我们知道了,这8个是浏览器发出HTTP请求默认会携带的请求头。
host:请求将要发送到的服务器主机名和端口号,如果没有包含端口号,会自动使用被请求服务的默认端口
connection:网络连接是否持久化,现在我们知道浏览器发出的请求是keep-alive,服务端发出的请求是close
accept:告知(服务器)客户端可以处理的内容类型,这种内容类型用MIME类型来表示。
accept-encoding:告知(服务器)客户端可以理解的内容编码方式,我们常用到的场景是gzip压缩。
accept-language:告知(服务器)客户端可以理解的自然语言。
user-agent:告知(服务器)发起请求的用户代理软件的应用类型、操作系统、软件开发商以及版本号。
referer:当前页面的来源页面的地址,即表示当前页面是通过此来源页面里的链接进入的。
cookie:携带cookie,跨域时默认不会携带,关于跨域时cookie的表现我们后面再讨论。