360前端星计划--前端常用的HTTP知识

HTTP是应用层协议

联网细节交给了通用的传输协议：TCP/UDP

请求/响应报文

<method> <request-URL> <version>

<headers>

<entity-body>

<version> <status> <respon-phrase>

<headers>

<entity-body>

请求类型

请求类型	描述
GET	获取一个资源内容
POST	新增一个资源
PUT	更新资源内容
DELETE	删除资源
OPTIONS	根据返回判断是否有对其请求的权限
HEAD	只返回 head，不返回实体内容
PATCH	更新部分内容

状态码

状态码	描述
1xx	请求已接受，需要继续处理
2xx	请求已经正确处理
3xx	重定向
4xx	客户端错误
5xx	服务端错误

常见状态码

状态码	描述
101	切换协议，如：将 HTTP 协议切换为 WebSocket 协议
200	成功
206	返回部分内容，如：大文件下载
301	永久重定向，如：资源更换路径或改名
302	临时重定向，如：当前请求需要登录，临时跳转到登录页
304	资源未修改，不返回实体内容，客户端可直接读取本地缓存内容
400	错误请求
403	拒绝执行，如：无对应的访问权限
404	资源找不到，如：服务器已经删除该资源

413	请求实体过大，如：服务端限制了上传的文件大小
500	服务端内部错误，如：数据处理异常导致报错
502	作为网关或代理服务器时，上游服务器异常
504	作为网关或代理服务器时，上游服务器处理超时

URL

<scheme>://<user>:<password>@<host>:<port>/<path>;<params>?<query>#<frag>

http://<host>:<port>/<path>?<query>#<frag>

ftp://<user>:<password>@<host>:<port>/<path>;<params>

受限字符：%/.#?;:$+@&= 以及非US-ASCⅡ字符集字符

Header 分类

通用

• Date: Tue, 3 Oct 2019 02:16:00 GMT
• Connection: close

请求

• User-Agent: Mozilla/5.0 (Linux; U; Android 4.0.2; en-us; Galaxy Nexus Build/ICL53F) AppleWebKit/534.30 (KHTML, like Gecko) Version/4.0 Mobile Safari/534.30
• Accept: */*

Header 分类

响应

• Server: Nginx
• Last-Modified: Thu, 16 Oct 2019 10:15:16 GMT

实体

• Content-Type: text/html; charset=utf-8
• Content-Length: 100

扩展（自定义）

• X-Powered-By: thinkjs-3.0.4
• X-Cache: hit

Cookie

GET / HTTP/1.1

Host: m.so.com

Connection: keep-alive

Cookie: __guid=34870781.3073803881376862000

HTTP/1.1 200 OK

Server: nginx/1.2.9

Date: Wed, 08 Oct 2014 05:59:59 GMT

Connection: keep-alive

Set-Cookie: thinkjs=s4mhqotbdbg9uh917lu8d5bub5; path=/

Content-Encoding: gzip

Cookie

Set-Cookie: <name>=<value>[; <name>=<value>]... [; expires=<date>][; domain=<domain_name>] [; path=<some_path>][; secure][; httponly][; samesite=<samesite_value>]

响应头里也可以有多个 Set-Cookie

Cookie安全策略

• path
• domain (hostonly*)
• expires  (max-age)
• secure
• httponly  （不让js操作）
• SameSite

Cookie 安全策略

• XSS 漏洞盗取 Cookie，设置 httponly
• CSRF 漏洞，设置 token/samesite

Session

• 服务器侧对应为 Session，基于 Cookie 存放用户信息
• Cookie 有效期为 Session（随浏览器进程退出而失效）

Content-Type

• application/x-www-form-urlencoded

• multipart/form-data

• application/json

• text/xml

POST http://www.example.com HTTP/1.1
Content-Type: application/x-www-form-urlencoded;charset=utf-8

title=test&sub%5B%5D=1&sub%5B%5D=2&sub%5B%5D=3

POST http://www.example.com HTTP/1.1
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--

POST http://www.example.com HTTP/1.1 
Content-Type: application/json;charset=utf-8

{"title":"test","sub":[1,2,3]}

POST http://www.example.com HTTP/1.1 
Content-Type: text/xml

<?xml version="1.0"?>
<methodCall>
    <methodName>examples.getStateName</methodName>
    <params>
        <param>
            <value><i4>41</i4></value>
        </param>
    </params>
</methodCall>

性能优化

• keep-alive
• 减少网络传输大小
• 缓存
• http2/http3

keep-alive

• HTTP 1.0 原本不支持 Keep-Alive，后来扩充了 Connection: Keep-Alive
• HTTP 1.1 默认支持 Keep-Alive，除非显式指明 Connection: close

减少网络传输大小

• 主要是文本资源
• 大约减少 60%
• 文件过小不宜压缩（<1K）

缓存

• LocalStorage
• ServiceWorker

http2/http3

HTTP2

• 二进制传输
• 多路复用
• 头部压缩
• server push

HTTP3

• 基于 QUIC 协议（UDP）

HTTP 抓包工具

• Wireshark
• Fiddler
• Firebug for Firefox
• Chrome 开发者工具
• IE8+ 自带的开发者工具

HTTP 发包工具

• telnet  / curl
• Fiddler *
• Tamper for Firefox
• Postman for Chrome *
• Paw for OSX