当前位置: 首页 > news >正文

在 Node.js 中设置响应的 MIME 类型

在 Node.js 中设置响应的 MIME 类型是为了让浏览器正确解析服务器返回的内容,比如 HTML、CSS、图片、JSON 等。我们通常通过设置响应头中的 Content-Type 字段来完成。


✅ 一、什么是 MIME 类型(Content-Type)?

MIME(Multipurpose Internet Mail Extensions)类型用于告诉浏览器或客户端:返回的数据是什么类型的内容

例如:

  • text/html:HTML 文件
  • application/json:JSON 数据
  • text/css:CSS 样式表
  • image/png:PNG 图片

✅ 二、手动设置 MIME 类型示例

const http = require('http');
const fs = require('fs');
const path = require('path');// 常见扩展名与 MIME 类型的映射表
const mimeTypes = {'.html': 'text/html','.css':  'text/css','.js':   'application/javascript','.json': 'application/json','.png':  'image/png','.jpg':  'image/jpeg','.gif':  'image/gif','.svg':  'image/svg+xml','.ico':  'image/x-icon','.txt':  'text/plain',
};const server = http.createServer((req, res) => {let filePath = '.' + (req.url === '/' ? '/index.html' : req.url);let ext = path.extname(filePath);// 默认 MIME 类型let contentType = mimeTypes[ext] || 'application/octet-stream';fs.readFile(filePath, (err, data) => {if (err) {res.writeHead(404, { 'Content-Type': 'text/plain' });return res.end('404 Not Found');}res.writeHead(200, { 'Content-Type': contentType });res.end(data);});
});server.listen(3000, () => {console.log('Server running on http://localhost:3000');
});

✅ 三、使用第三方模块 mime

如果你不想维护 MIME 映射表,可以使用官方推荐的 mime 模块。

安装:

npm install mime

使用:

const mime = require('mime');
const filePath = 'public/style.css';
const contentType = mime.getType(filePath); // 返回 'text/css'

✅ 常用 MIME 类型一览

扩展名MIME 类型
.htmltext/html
.csstext/css
.jsapplication/javascript
.jsonapplication/json
.pngimage/png
.jpgimage/jpeg
.gifimage/gif
.svgimage/svg+xml
.txttext/plain
.pdfapplication/pdf

✅ 四、注意事项

  • Content-Type告诉浏览器怎么处理数据的关键;
  • MIME 类型必须与实际资源类型匹配,否则浏览器可能拒绝渲染或报错;
  • 若未设置 Content-Type,浏览器可能会猜测类型,但这不安全;
  • 返回 JSON 时推荐:
    res.writeHead(200, { 'Content-Type': 'application/json' });
    res.end(JSON.stringify({ message: 'hello' }));
    

http://www.xdnf.cn/news/49051.html

相关文章:

  • Tailwindcss 入门 v4.1
  • rag搭建,是如何进行向量匹配检索的?
  • jsch(shell终端Java版)
  • LeRobot 项目部署运行逻辑(二)—— Mobile Aloha 真机部署
  • Vue3 打印网页内容
  • 通过Dify快速搭建本地AI智能体开发平台
  • 高边开关和低边开关的区别
  • 前端工程化之自动化部署
  • MVCC介绍
  • 《AI大模型应知应会100篇》第28篇:大模型在文本创作中的应用技巧
  • Matlab FCM模糊聚类
  • AI 编程工具——使用cursor创建一个mcp服务,并在cursor中调用
  • 使用LSTM动态调整SIMPLE算法松弛因子的CFD仿真训练程序
  • 使用tshark命令解析tcpdump抓取的数据包
  • 2025年4月19日
  • 【第四十一周】文献阅读:HippoRAG:受神经生物学启发的大型语言模型长期记忆机制
  • STM32 CubeMx下载及安装(一)
  • 【leetcode100】一和零
  • HarmonyOS-ArkUI-动画分类简介
  • javaSE.链表
  • 前端知识深度学习
  • [论文阅读]Making Retrieval-Augmented Language Models Robust to Irrelevant Context
  • ClickHouse简介
  • TCP常见知识点整理
  • 【C语言】char unsigned char signed char
  • Centos7 ftp、sftp无法使用ftp连接虚拟机
  • vue3 excel文件导入
  • MAC-从es中抽取数据存入表中怎么实现
  • C语言状态字与库函数详解:概念辨析与应用实践
  • 2025-2030:视频联网平台的六大技术演进趋势