文章目录
- 一、认识请求"报头"(header)
- 1.HOST
- 2.Content-Length
- 3.Content-Type
- 4.User-Agent (简称 UA)
- 5.Referer
- 4.Cookie
- 二、HTTP响应详解
- 1. 认识"状态码"(status code)
- 2. Content-Type
- 3. 如何构造HTTP请求
- 总结
一、认识请求"报头"(header)
这里的键值对,都是标准规定的,有特定含义的,当然这里也可以放一些自定义的 键值对
1.HOST
表示服务器主机的地址和端口

💥注意:
URL里的ip和端口和HOST里的ip和端口不一定完全一样~
当请求时经过代理来访问的时候,是可能会不一样的~ (这一点在Fiddler没体现出来)
2.Content-Length
表示 body 中的数据长度(用于解决粘包问题)
3.Content-Type
表示请求的 body 中的数据格式
body中的数据可以放很多种格式,存不同的格式,对于接收方来说,解析方式是截然不同的~

上面的两个字段不一定有,但是如果有一个就会有另一个~
如果请求没有body(GET)就没有这两个字段~
如果请求有body(POST),一定有这两个字段~
常见选项:
application/x-www-form-urlencoded: 通过form表单构造的请求,就是这个Content-TypeHTML的form标签
此时 body 的格式形如:title=test&content=hello这个格式就是和query string是一样的,里面可以放多个键值对,键值对之间使用&来分割,键和值之间使用=来分割 (并且这里也是需要urlencode的)multipart/form-data:form表单提交的数据格式(通常用于提交图片/文件),body格式形如:
Content-Type:multipart/form-data; boundary=----
WebKitFormBoundaryrGKCBY7qhFd3TrwA
------WebKitFormBoundaryrGKCBY7qhFd3TrwA
Content-Disposition: form-data; name="text"
title
------WebKitFormBoundaryrGKCBY7qhFd3TrwA
Content-Disposition: form-data; name="file"; filename="chrome.png"
Content-Type: image/png
PNG ... content of chrome.png ...
------WebKitFormBoundaryrGKCBY7qhFd3TrwA--
application/json: 数据为json格式(比较主流),body格式形如:
{"username":"xxxxx","password":"xxxx","code":"xxxxl","uuid":"dxxxxx
xxxxx"}
4.User-Agent (简称 UA)

现在UA仍然是有用的!! 可以根据UA来识别出PC平板还是手机,分别开发出不同版本的页面,来去满足不同设备的需求!
但是现在又出现了一个"响应式页面",通过特殊的CSS和JS,感知当前浏览器窗口的尺寸,根据不同的尺寸,重新排列页面布局!!
这样就可以写一份页面兼容多个设备了~~
随着时间推移,UA几乎已经完成历史使命了~
UA即使失去了最终的作用,但是至少可以用来在服务器端统计用户的设备情况(大数据阶段的作用)
小结:
UA主要包含的信息,就是操作系统信息和浏览器信息,描述了用户在使用啥样的设备上网!!
5.Referer
表示这个页面是从哪个页面跳转过来的,形如:
Referer:https://www.sogou.com/
Referer指的就是当前这个页面是从哪个页面跳转过来的(上级页面是什么),Referer不是每个地址都有的!!
在浏览器里直接输入一个地址,就没有Referer,直接点收藏夹里的网址也没有Referer
🎑举个使用Referer的例子:
按照点击计费的广告(CPC广告):
得统计点击的次数,根据点击的次数,和广告主来结算广告费~
❓那点了多少次谁来统计呢?
答案是双方都统计,然后最后对一下数据
❓广告公司如何统计?
每次点击跳转,其实都是会先访问广告公司的计费服务器,计费服务器再返回一个重定向报文,跳转到广告主的广告那边~
请求先给了计费服务器(在这里就可以统计点击的数量),返回一个js代码,来进行页面跳转.
❓广告主如何统计?
看服务器收到的请求中,有多少Referer是来自于广告公司的
但是这里面有安全问题❗❗
比如本来Referer是腾讯的,然后被改成别的了:

只要在用户分给广告主请求的中间的路径上,对请求报文进行偷龙转凤,就可以通过这个设备把Referer给改了!!!
❓如何在技术上解决这个问题?
关键要点:加密!! 使用HTTPS!! chrome浏览器如果遇到了HTTP的网站,直接弹框告警,就会让网站蒙受不小的损失
4.Cookie
Cookie 也是请求头的一个重要字段,是浏览器本地存储数据(存到硬盘上)的一种机制~

但是浏览器专门提供了特殊的api给网页使用,可以让网页存储一些简单的数据~
浏览器提供的持久化存储方案,有好几种:
Cookie是最经典的一种方案(最老)LocalStorage是比较新的一种方案indexDB是更新的方案
Cookie:

cookie这里的键值对都是简单的字符串,使用cookie作为保存数据的手段,只能存一些简单的键值对信息,简单的字符串,存不了太复杂的(比如图片,视频,flash)
比如可以使用cookie存:
- 上次访问页面的时间
- 当前网页的访问次数
- 当前访问页面的身份信息(身份标识,id)

cookie从哪来的
cookie是存储在浏览器的,来源是服务器

在服务器返回的响应报文中,可以在响应header中包含一个或多个Set-Cookie这样的字段~ 在header中存的是键值对,Set-Cookie是key,value就是cookie里的值~ (程序员在服务器代码中构造出来的)
浏览器看到Set-Cookie就会把这样的数据给保存在浏览器本地

cookie到哪里去
来自于服务器,存储于浏览器,还要再回到服务器~
当浏览器保存了cookie之后,下次浏览器访问同一个网站,就会把之前本地存储的cookie再通过http请求header中的cookie给带回去
❓为啥数据要转一圈?
服务器要服务的客户端是很多的,这些不同的客户端就应该要有不同的数据,此时我们就把对应的客户端数据就发给各自客户端的浏览器,大家各存各的,然后下次访问的时候,再把数据带回去,服务器就知道每个客户端的相关情况了~
💌cookie典型应用场景:
最常用的场景就是在客户端维持登录状态~ (不是唯一场景)
在某个网站上登录成功后,浏览器就会记住当前登陆用户的身份信息~
然后接下来访问网站的其他页面,服务器也能知道是谁在登陆(比如登录了bilibili账号后,不用看每个视频都重新登陆一次~ )

刚才的身份信息,在这个网站的任意子网站,都是可以使用的,但是如果换了个网站,就需要重新注册身份信息了~
Cookie只是针对当前的 域名 下的网站生效!

刚才看到的大部分路径都是/. ,意思是在整个网站下,所有的路径都是生效的~
但是有些页面特殊,需要特定的cookie,这些特定的cookie在别的页面中无意义!
❓把Cookie删掉是什么样的效果呢?

但是重新登陆Cookie就会回来了~
上述介绍的这一系列流程,是cookie在实现登录验证的时候,涉及到的情况~ 如果针对某个网站抓包,看到的cookie的情况会比上述介绍的情况更复杂一些~
目前先介绍到这里~
后续再看看cookie更纯粹的工作过程~
二、HTTP响应详解
1. 认识"状态码"(status code)
状态码是一个数字,描述了当前这次请求的"状态"(成功,失败,失败的原因)
HTTP的状态码是有明确规定的~
状态码种类有很多:
等等…
主要认识其中常见的状态码即可~
-
200表示访问成功
响应的首行中也会包含状态码
-
404Not found
学习后端开发经常见到的一个错误!
问题的原因,就是请求路径写错了
请求里包含url,url里包含路径(路径表示你要访问服务器上的资源)
如果你想访问的资源,服务器上没有(路径写错了),此时就会返回404
-
403Forbidden
访问被拒绝 (没有权限),比如不在登陆状态访问gitee私人仓库

404和403本质上都是客户端这里的问题,所以都用4开头 -
500internal Sever Error 服务器内部错误
服务器代码执行过程中,出异常了(意味着服务器代码bug了) -
504Gateway Timeout
访问超时了,一般就是服务器请求量很大的时候,对于服务器的负荷就比较重,就会返回请求比较慢,等待超时了,就会显示504
500 504 这种都是服务器出问题了,就都使用5 来开头
302重定向
重定向:访问一个旧的URL,自动转移到新的URL上
1.呼叫转移 : 当有人给旧的号码打电话,自动的转接到新号码上
2.服务器的地址迁移,过渡阶段就可以搞个重定向,访问旧域名就跳转到新域名~
状态码的类别:

状态码的彩蛋:
418I’m a teapot 愚人节笑话

这个状态码是明确的写在HTTP对应的RFC标准文档中的~
2. Content-Type
响应中的 Content-Type 常见取值有以下几种:
text/html: body 数据格式是 HTMLtext/css: body 数据格式是 CSSapplication/javascript: body 数据格式是 JavaScriptapplication/json: body 数据格式是 JSON
3. 如何构造HTTP请求
- 浏览器自己构造的(地址栏里写
url,构造出get请求)
点击a标签,也会构造get请求
img,link,script,也会构造`get请求 form表单


如果方法是post方法,就需要借助抓包软件查看body~
form最关键的作用,就是给服务器传键值对~
ajax各种http方法都能构造
form构造的http请求一定会触发页面跳转的ajax默认发起的请求不会引起跳转,当然,也可以手动控制跳转~
页面跳转,不是一个好事,开销大,时间慢,用户就需要等待
使用ajax不去触发跳转,就可以达到"局部刷新"这样的效果~
❓如何在代码中
使用ajax构造http请求:
ajax api是属于浏览器原生自带的,但我们通常使用第三方库封装好的api,代替原生的api
如: jquery,可以直接通过网络地址,把jquery引入到代码中
虽然
ajax方法的的参数只有一个,但是里面是一个对象
-
get:

-
post:

直接打开ajax.html :

跨域:一个页面在域名a之下,尝试通过ajax访问域名b里的资源
这种情况,浏览器默认是禁止的,除非b网站返回的响应明确告诉浏览器,允许跨域访问!
市面上看到的大部分网站/服务器 基本都是不允许跨域的
❓这种情况如何解决?
自己写个服务器,页面放到自己的服务器上,页面访问自己服务器的资源
以上都是基于前端(围绕浏览器)来构造的HTTP请求,但是不用浏览器也是可以的❕❕
但凡是某个编程语言,可以操作网络(能够进行socket编程,就一定可以构造http请求(往一个tcp socket里写一个符合http协议格式的字符串)
postman 就属于是一个专门用来构造HTTP请求的第三方工具,主要用来帮助我们进行 接口测试
🎂接口测试 :
后端写好服务器之后,需要提供一些HTTP的接口(可以接受一些HTTP请求,返回不同的响应)
程序员就得验证下接口对不对,就可以使用前面说的这些方法来发(如浏览器地址栏,a标签,form,ajax),但是以上的方法比较麻烦,于是就有大佬专门开发了用来构造http请求的工具,更方便的来构造http请求了~
总结






















