面试题
浏览器和协议
输入url到页面加载的过程
- DNS域名解析
- 建立TCP连接
- 发送HTTP请求
- 服务器返回相应
- 浏览器渲染
三次握手与四次挥手
TCP协议是面向连接、可靠的数据传输协议（按顺序、不丢失、不重复）
三次握手（建立连接）
- 客户端发送报文SYN（听得到吗？）
- 服务器接收报文并向客户端发送报文SYN+ACK（听得到，你说）
- 客户端接收报文ACK（好，我开始说了）
为什么不是两次
- 防止失效的连接又传递过来
四次挥手（断开连接）
- 客户端发送报文FIN，停止发送数据（我要走了）
- 服务器接收报文，发送确认报文ACK（好的，我知道了）
- 服务器发送结束报文FIN（我也要走了）
- 客户端接收结束报文，发送确认报文ACK，等待2MSL后关闭连接（好的，你走吧）
为什么不是三次
- 二三次之间会有未发送完的数据
为什么等待2MSL
- 确保最后一个ACK到达服务器
- 防止之前的报文干扰
HTTP与HTTPS
| 特性 | HTTP | HTTPS |
|---|---|---|
| 协议 | TCP | SSL/TLS |
| 端口 | 80 | 443 |
| 安全性 | 明文传输 | 密文传输 |
| 身份认证 | 无 | CA数字证书 |
| SEO | 不占优 | 排名优先 |
| 性能 | 不安全 | 安全 |
| 开销 | 连接更快 | 连接更慢 |
跨域问题
同源：协议、域名、端口相同
跨域：脚本请求非同源的资源
为何跨域
- 浏览器防止跨站脚本XSS恶意请求
解决跨域
- 跨域资源共享CORS，响应头中添加特定字段
plain
// 请求头
Origin: https://www.taobao.com
// 响应头 (服务器设置)
Access-Control-Allow-Origin: https://www.taobao.com // 或使用 * 允许任何源（但不能带凭证）plain
app.use((req, res, next) => {
// 允许来自所有域的请求（生产环境应指定具体域名，如：https://www.taobao.com）
res.header('Access-Control-Allow-Origin', '*');
// 允许的请求方法
res.header('Access-Control-Allow-Methods', 'GET, POST, PUT, DELETE, OPTIONS');
// 允许的请求头
res.header('Access-Control-Allow-Headers', 'Content-Type, Authorization');
// 处理预检请求
if (req.method === 'OPTIONS') {
return res.sendStatus(200);
}
next();
});- 反向代理，服务器转发（不会被拦截）
plain
// vite.config.js
export default {
server: {
proxy: {
'/api': { // 以 /api 开头的请求
target: 'https://api.target.com', // 目标服务器
changeOrigin: true, // 修改请求头中的 Origin 为目标地址
rewrite: (path) => path.replace(/^\/api/, '') // 重写路径（可选）
}
}
}
}plain
// nginx
server {
listen 80;
server_name www.taobao.com;
location /api/ { # 匹配 /api 路径的请求
proxy_pass https://api.target.com/; # 转发到目标服务器
proxy_set_header Host $host;
proxy_set_header X-Real-IP $remote_addr;
}
}服务器返回码
4xx找前端，5xx找后端
| 状态码 | 简义 | 含义 |
|---|---|---|
| 100 | 继续请求 | 服务器已接收到部分请求，等待剩下的部分继续请求 |
| 101 | 切换协议 | 客户端请求切换协议，服务器已准备切换协议 |
| 200 | 请求成功 | 客户端请求的数据服务器已成功返回 |
| 201 | 创建成功 | 客户端请求成功且服务器已创建新的资源 |
| 202 | 接受请求 | 服务器已接受请求，但尚未处理 |
| 203 | 非授权信息 | 服务器处理成功，但返回内容源于其他 |
| 204 | 没有内容 | 服务器处理成功，但是没有任何返回 |
| 205 | 内容重置 | 服务器处理成功，内容无返回，请求重置文档内容 |
| 206 | 部分内容 | 服务器成功处理了部分get请求 |
| 300 | 多种选择 | 服务器可以执行多个操作，或者根据返回列表客户端选择进行操作 |
| 301 | 永久移动 | 请求的资源已永久移动到其他位置，服务器自动修改请求资源的位置 |
| 302 | 临时移动 | 服务器响应的资源非在客户端请求的位置，但是可以响应该请求 |
| 303 | 访问其他位置 | 服务器自动（除 HEAD 之外）请求的其他位置 |
| 304 | 未修改 | 上次访问服务器的资源没有改变 |
| 305 | 使用代理 | 客户端使用代理访问服务器 |
| 307 | 临时重定向 | 客户端的要求服务器临时修改当前访问资源位置 |
| 400 | 请求错误 | 服务器无法解析该请求 |
| 401 | 未授权 | 客户端请求的资源没有进行身份验证，或未请求权限 |
| 403 | 拒绝请求 | 客户端发起的请求被服务器拒绝 |
| 404 | 未找到 | 没有找到请求的网页地址或请求的地址不存在 |
| 405 | 方法禁用 | 客户端请求的方法被禁用 |
| 406 | 无法请求 | 无法使用请求的内容特性响应请求的网页 |
| 407 | 缺少代理授权 | 客户端请求应使用代理或需要代理的授权 |
| 408 | 请求超时 | 服务器等候请求超时 |
| 409 | 存在冲突 | 服务器返回字段存在冲突，或返回的列表差异过大 |
| 410 | 已删除 | 请求资源已删除，请求资源以前有而现在没有 |
| 411 | 标头字段无效 | 服务器不接受不含有效内容长度标头字段的请求 |
| 412 | 条件未满足 | 服务器未满足请求者在请求中设置的其中一个前提条件 |
| 413 | 请求体超标 | 服务器无法处理超标（占用内存太大）的请求，超出了服务器的处理范围 |
| 414 | URI超标 | 请求的 URI超标，服务器无法解析 |
| 415 | 不支持请求 | 请求的格式不受请求页面的支持 |
| 416 | 不在请求范围 | 页面无法提供请求的范围 |
| 417 | 请求头未满足条件 | 服务器没有按要求请求标头字段 |
| 500 | 服务器内部错误 | 服务器无法完成请求 |
| 501 | 未完成请求 | 服务器问题，没有完成请求，并非请求问题 |
| 502 | 网关错误 | 服务器配置的网关可能存在问题，无法接收信息 |
| 503 | 服务器不可使用 | 服务器正处于维护阶段或暂停服务 |
| 504 | 网关超时 | 网关没有及时未回应，上游没有接收到信息 |
| 505 | HTTP协议不支持 | 当前请求的HTML版本与服务器不一致或服务器不支持当前请求的HTML版本 |
HTML
HTML语义化标签有哪些
- header 头部
- nav 导航栏
- section 区块
- main 主要区域
- article 文章
- aside 侧边栏
- footer 底部
拖拽过程
plain
dragstart // 开始拖动
drag // 持续拖动
draend // 拖动结束
dragenter // 拖动进入目标
dragover // 拖动到目标上方
dragleave // 拖动离开目标
drop // 松开鼠标