什么是HTTP

HTTP是超文本传输协议的缩写，是互联网上应用最广泛的网络协议。我们每次浏览网页、请求接口，底层都是HTTP在工作。

HTTP是基于请求-响应模式的。客户端发起请求，服务端返回响应。

URL结构

URL就是网址，它的完整结构是这样的：

https://www.example.com:443/path/to/page?a=1&b=2#section

协议：https
域名：www.example.com
端口：443
路径：/path/to/page
查询参数：a=1&b=2
锚点：section

HTTP请求

一个HTTP请求由三部分组成：请求行、请求头、请求体。

一、请求行

包含请求方法、请求路径、HTTP版本。

GET /api/users HTTP/1.1

二、请求头

包含各种元信息，比如：

Host：服务器域名
User-Agent：客户端信息
Accept：客户端能接收的内容类型
Content-Type：请求体的内容类型
Authorization：认证信息

三、请求体

POST和PUT等请求会携带请求体，比如表单数据或JSON数据。

请求方法

最常用的请求方法有这几个：

GET：获取资源，参数在URL中，有长度限制，一般用于查询数据

POST：创建资源，参数在请求体中，没有长度限制，一般用于提交数据

PUT：更新资源，一般用于完整更新

PATCH：部分更新资源

DELETE：删除资源

GET和POST的区别是面试常问的：

GET参数在URL里，POST参数在请求体里

GET有长度限制，POST没有

GET可以被浏览器缓存，POST不会

GET不敏感，POST相对安全一点

HTTP响应

HTTP响应也由三部分组成：状态行、响应头、响应体。

一、状态行

包含HTTP版本、状态码、状态描述。

HTTP/1.1 200 OK

二、响应头

包含服务器信息、内容类型、缓存策略等。

Content-Type：application/json
Cache-Control：max-age=3600

三、响应体

服务器返回的具体数据，比如JSON或HTML。

状态码详解

状态码是服务器告诉客户端请求结果的数字代码，分为五类。

1xx：信息响应，请求已被接收，继续处理

这个类别很少用到，了解一下就行。

2xx：成功，请求被成功处理

200 OK：请求成功，最常用的状态码

201 Created：资源创建成功，一般用于POST请求

204 No Content：请求成功但没有内容返回，一般用于DELETE请求

3xx：重定向，需要进一步操作

301 Moved Permanently：资源永久移动到新地址，搜索引擎会更新链接

302 Found：临时重定向，资源还在原地址，只是这次临时跳转

304 Not Modified：资源没有修改，可以使用缓存

4xx：客户端错误，请求有问题

400 Bad Request：请求格式错误，参数不对

401 Unauthorized：没有认证，需要登录

403 Forbidden：认证了但没有权限访问

404 Not Found：请求的资源不存在，最常见的问题之一

405 Method Not Allowed：请求方法不被允许

429 Too Many Requests：请求太频繁，触发了限流

5xx：服务端错误，服务器处理失败

500 Internal Server Error：服务器内部错误，后端代码报错

502 Bad Gateway：网关错误，上游服务器出问题

503 Service Unavailable：服务不可用，服务器过载或正在维护

504 Gateway Timeout：网关超时，上游服务器响应太慢

常见Header

一、Content-Type

告诉对方我发送的是什么格式的数据。

application/json：JSON格式
application/x-www-form-urlencoded：表单格式
multipart/form-data：文件上传格式
text/html：HTML文档

二、Cache-Control

控制缓存策略。

Cache-Control：no-cache 每次都去验证缓存
Cache-Control：no-store 完全不缓存
Cache-Control：max-age=3600 缓存一小时

三、Authorization

传递认证信息，最常用的是Bearer Token。

Authorization：Bearer eyJhbGciOiJIUzI1NiIs...

HTTPS是什么

HTTPS是HTTP加上SSL/TLS加密层，数据在传输过程中是加密的，更安全。

现在的网站基本都要求用HTTPS，小程序也强制要求HTTPS。

HTTPS需要申请SSL证书，有免费的也有收费的，免费的够用。

前端常用场景

场景一：封装请求函数

async function request(url, options = {}) {
const response = await fetch(url, {
headers: {
'Content-Type': 'application/json',
'Authorization': Bearer ${getToken()}
},
...options
})

if (!response.ok) {
throw new Error(HTTP ${response.status})
}

return response.json()
}

场景二：处理不同的状态码

if (response.status === 401) {
// 未认证，跳转到登录页
redirectToLogin()
} else if (response.status === 403) {
// 无权限，提示用户
showMessage('你没有权限执行此操作')
} else if (response.status === 404) {
// 资源不存在
showMessage('请求的资源不存在')
}

总结

HTTP协议是前端开发的基础知识，不用背下来，但要理解核心概念。

面试常问的点：状态码含义、GET和POST区别、请求头和响应头的作用。

实际工作中，会看状态码定位问题、会看Network面板就够了。