HTTP(动静分离)

什么是动静分离？

动静分离 是一种在Web服务器架构中常用的优化技术，旨在提高网站的性能和可伸缩性。它基于一个简单的原则：将动态生成的内容（如动态网页、API请求）与静态资源（如HTML、CSS、JavaScript、图像文件）分开处理和分发。

什么是Web服务器？

服务器：是一个泛指的大概念（既可以是硬件也可以是软件）。指任何能提供某种网络服务的程序。只要它在网络上开了个端口，等着别人来连接并使用它的功能，它就是服务器软件。

Web服务器：是"服务器"这个大家族里，一个专门干特定活儿（处理HTTP协议）的"专职成员。指任何能提供某种网络服务的程序。只要它在网络上开了个端口，等着别人来连接并使用它的功能，它就是服务器软件。
什么是Web 服务器架构？

Web 服务器架构不是某个固定的组件，而是一整套 "如何接收请求、处理逻辑、返回资源"的软件结构和运行机制。

动静分离的好处

通过将动态内容和静态资源存储在不同的服务器或服务上，并使用不同的处理机制，可以提高网站的处理效率和响应速度。：

性能优化 ：将静态资源与动态内容分离可以提高网站的加载速度 。由于静态资源 往往是不变的，可以使用缓存机制将其存储在CDN （内容分发网络）或浏览器缓存中，从而减少网络请求和数据传输的开销。
负载均衡 ：通过将动态请求分发到不同的服务器或服务上，可以平衡服务器的负载，提高整个系统的可伸缩性和容错性。
安全性 ：将动态请求与静态资源分开处理可以提高系统的安全性。静态资源通常是公开可访问的，而动态请求可能涉及敏感数据或需要特定的身份验证和授权。通过将静态资源与动态内容分离，可以更好地管理访问控制和安全策略。

实现动静分离的方法

使用反向代理服务器（如Nginx、Apache）将静态请求和动态请求转发到不同的后端服务器或服务。
将静态资源部署到CDN上，通过CDN分发静态资源，减轻源服务器的负载。
使用专门的静态文件服务器（如Amazon S3、Google Cloud Storage）存储和提供静态资源，而将动态请求交给应用服务器处理。

js 复制代码

//index.js
import http from 'node:http' // 导入http模块
import path from 'node:path'
import mime from 'mime'
import fs from 'node:fs'

http.createServer((req, res) => {
    const { url, method } = req
    if(method === 'GET' && url.startsWith('/static')) {
        // GET http://localhost:80/static/images/photo.jpg HTTP/1.1
        const filePath = path.join(process.cwd(), url) // 获取文件路径
        const mimeType = mime.getType(filePath) // 获取文件的MIME类型
        console.log(filePath, mimeType) // 打印MIME类型

        fs.readFile(filePath, (err, data) => { // 读取文件内容
            // console.log('111')
            if (err) {
                res.writeHead(404, {
                    "Content-Type": "text/plain" // 设置响应头为纯文本类型
                })
                res.end('not found') // 返回404 Not Found
            } else {
                res.writeHead(200, {
                    "Content-Type": mimeType, // 设置响应头为对应的MIME类型
                    "Cache-Control": "public, max-age=3600" // 设置缓存控制头
                })
                res.end(data) // 返回文件内容，如果是图片，会直接返回图片
            }
        })
    }

    // 处理动态资源
    if ((method === 'GET' || method === 'POST') && url.startsWith('/api')) {
        // ...处理动态资源的逻辑
    }
}).listen(80)

http 复制代码

# Content-Type: application/json

# {
#     name: '小满zs'
# }

GET http://localhost:80/static/images/photo.jpg HTTP/1.1

因为每个文件所对应的mime类型都不一样，如果手写的话有很多，不过强大的nodejs社区提供了mime库，可以帮我们通过后缀直接分析出所对应的mime类型，然后我们通过强缓存让浏览器缓存静态资源

常见的mime类型展示

文本文件：

text/plain：纯文本文件

text/html：HTML 文件

text/css：CSS 样式表文件

text/javascript：JavaScript 文件

application/json：JSON 数据

图像文件：

image/jpeg：JPEG 图像

image/png：PNG 图像

image/gif：GIF 图像

image/svg+xml：SVG 图像

音频文件：

audio/mpeg：MPEG 音频

audio/wav：WAV 音频

audio/midi：MIDI 音频

视频文件：

video/mp4：MP4 视频

video/mpeg：MPEG 视频

video/quicktime：QuickTime 视频

应用程序文件：

application/pdf：PDF 文件

application/zip：ZIP 压缩文件

application/x-www-form-urlencoded：表单提交数据

multipart/form-data：多部分表单数据

判断mime类型有什么意义

判断MIME类型的核心意义，在于解决"数据该怎么被解读"这个根本问题。 如果没有MIME类型，互联网上的数据就是一串没有意义的二进制流，浏览器不知道该怎么处理，操作系统也不知道该用什么软件打开。

维度一：用户体验层面（最直观）

没有MIME类型，浏览器就是个"瞎子"。

场景	没有MIME类型	有MIME类型
点击一个图片链接	浏览器下载成文件，你不知道发生了什么	浏览器直接渲染显示在页面上
点击一个PDF链接	浏览器下载成乱码或弹出保存对话框	浏览器直接打开预览，或弹出下载提示
访问一个JSON接口	浏览器显示纯文本，杂乱无章	浏览器自动格式化JSON，或前端框架自动解析

实际例子：

arduino 复制代码

假设服务器把 photo.jpg 返回成 Content-Type: text/plain
浏览器会怎么做？------ 它会把图片的二进制数据当作文本显示出来，屏幕上是成千上万个乱码字符。

这正是MIME类型的第一个意义：告诉浏览器"这是图片，请渲染"或"这是JSON，请解析"。

维度二：安全防护层面（生死攸关）

这是最重要的意义，尤其是对于后端开发。

文件上传攻击（最典型的漏洞）

黑客可以这样做：

把一个 virus.exe（病毒文件）改名为 avatar.jpg
通过网站的头像上传功能提交
如果服务器只检查扩展名（.jpg），就放行了
其他用户访问这个"头像"时，浏览器看到扩展名是.jpg，但服务器返回的MIME类型如果是image/jpeg，浏览器按图片渲染，不会执行病毒（暂时安全）

但如果服务器不检查MIME类型，直接把这个文件存储在服务器上，用户通过/uploads/avatar.jpg访问时：

服务器返回的 Content-Type	浏览器行为	后果
`image/jpeg`	当成图片渲染	安全（但病毒仍存储在服务器）
`application/octet-stream`	当成二进制数据下载	用户下载后可能双击运行病毒 ❌
`text/html`	当成HTML解析	浏览器直接执行其中的JS脚本 ❌❌

真实漏洞案例：

2017年，某知名社交平台的文件上传功能，攻击者上传了一个包含恶意JavaScript的SVG文件，服务器没有校验MIME类型，直接返回image/svg+xml，浏览器渲染SVG时执行了脚本，盗取了用户Cookie。

所以MIME类型的第二个意义：通过正确的Content-Type，防止浏览器错误地执行恶意代码（XSS、文件包含攻击）。

维度三：性能优化层面（动静分离）

MIME类型帮助服务器和CDN做智能缓存和压缩策略。

MIME类型	缓存策略	压缩策略
`image/jpeg`, `image/png`	缓存30天	不压缩（已经压缩）
`text/css`, `application/javascript`	缓存7天	启用gzip压缩（压缩率70%）
`text/html`	缓存5分钟	启用gzip压缩
`application/json`	不缓存	启用gzip压缩

实际效果：

一个300KB的CSS文件，gzip压缩后只有30KB，加载速度提升10倍。
Nginx通过检查Content-Type自动决定是否压缩，这就是MIME类型配置在Nginx里如此重要的原因。

nginx 复制代码

# nginx.conf 中的MIME配置
gzip on;
gzip_types text/plain text/css application/javascript application/json image/svg+xml;
# 只有匹配这些MIME类型的文件，才会被压缩

维度四：数据解析层面（程序行为）

对于非浏览器的客户端（App、爬虫、API调用），MIME类型决定了数据怎么被解析。

客户端收到的 Content-Type	客户端的行为
`application/json`	调用JSON解析器，反序列化成对象
`application/xml`	调用XML解析器
`text/event-stream`	开启Server-Sent Events（SSE）长连接流式处理
`multipart/form-data`	按分块方式解析文件上传
`application/octet-stream`	当成原始二进制流处理（下载）

实际例子：

前端调用API时，axios或fetch会自动根据Content-Type决定如何解析响应体：

javascript

csharp 复制代码

// 如果服务器返回 Content-Type: application/json
const data = await response.json(); // ✅ 自动解析成对象

// 如果服务器返回 Content-Type: text/plain
const text = await response.text(); // ✅ 按文本处理

如果服务器返回的Content-Type是text/html但内容是JSON，前端就要手动处理，增加开发成本和出错概率。

一个完整场景串联（让你看到全貌）

假设用户上传一个头像，到你在浏览器中看到这张图，中间MIME类型起了多少次作用：

text

bash 复制代码

1. 用户选择文件上传
   → 前端检查文件的MIME类型（用 file.type），只允许 image/*

2. 文件传到后端
   → 后端用 magic 读取文件头，校验真实MIME类型，防止伪造
   → 后端存储文件，记录真实MIME类型到数据库

3. 用户访问头像 /avatar/123.jpg
   → Nginx 拦截请求，根据文件扩展名 .jpg 找到 MIME 映射：image/jpeg
   → Nginx 在响应头加入 Content-Type: image/jpeg
   → Nginx 检查 gzip_types，image/jpeg不在其中，不压缩

4. 浏览器收到响应
   → 看到 Content-Type: image/jpeg，调用图片解码器渲染
   → 显示在页面上，用户看到了自己的头像

每一次MIME类型的判断，都决定了这一个环节能否正确工作。

总结一句话

判断MIME类型，本质是"让数据被正确理解、安全执行、高效传输"的基础设施。

意义维度	一句话概括
用户体验	告诉浏览器是显示图片、预览PDF还是下载文件
安全防护	防止恶意文件被当作HTML/JS执行（XSS攻击）
性能优化	决定是否压缩、缓存多长时间
数据解析	告诉客户端用JSON解析器还是XML解析器

如果你是在做文件上传功能，强烈建议服务端校验MIME类型，别只信任扩展名。