Nginx 中如何为静态资源配置正确的 MIME 类型映射

夏婷姑娘_2687

夏婷姑娘_2687

2026-07-22

1020人浏览

原创

直接在nginx配置中用types块声明扩展名与mime类型映射,配合default_type兜底,避免修改mime.types;需置于http或server块内、语法规范、顺序在include mime.types之后,配置后须nginx -t校验并reload生效。

nginx 中如何为静态资源配置正确的 mime 类型映射

直接在 Nginx 配置中声明扩展名与 MIME 类型的对应关系,而不是修改默认 mime.types 文件。核心是用 types 块定义映射,并配合 default_type 做兜底,配置完必须重载生效。

用 types 块补充或覆盖默认映射

Nginx 只看请求 URL 末尾的扩展名(比如 .js.woff2),不读文件内容。它靠 types 块里的规则决定返回什么 Content-Type 头——这个头错了,浏览器就可能把 JS 当文本下载、把字体当乱码、把 JSON 渲染失败。

  • 别直接改 /etc/nginx/mime.types:升级或重装容易被覆盖,协作时也难追踪
  • 推荐做法是在 httpserver 块里内联写 types,或者 include 自定义文件
  • 内联示例(适合少量新增):
    types {<br>  application/javascript js mjs;<br>  font/woff2 woff2;<br>  image/avif avif;<br>  application/wasm wasm;<br>}
  • 分离写法(更清晰,推荐):
    新建 /etc/nginx/conf.d/custom.mime,写入:
    types {<br>  application/json json json5;<br>  application/font-woff2 woff2;<br>  image/webp webp;<br>}

    再在 nginx.confhttp 块中加:include /etc/nginx/conf.d/custom.mime;

设置 default_type 兜底防止类型缺失

如果请求的后缀(如 .vitepress.tsbuildinfo)没在任何 types 块里定义,Nginx 默认不设 Content-Type 头——浏览器就会按 text/plainapplication/octet-stream 处理,现代前端资源大概率被拒绝。

Nginx Config Linter
Nginx Config Linter

对 Nginx 配置文件进行语法检查、验证和安全、性能审计。

下载
  • 显式配置 default_type 是关键
  • 安全兜底用:default_type application/octet-stream;(未识别文件强制下载)
  • 调试友好用:default_type text/plain;(方便查看内容)
  • 放在 http 块最稳妥,避免 location 内遗漏导致继承失效

验证是否生效,排查常见问题

配置不是写完就起作用,必须校验并重载;验证最直接的方式就是看响应头。

  • 执行 nginx -t && nginx -s reload 才能生效
  • curl -I https://yoursite.com/app.jsContent-Type: application/javascript
  • curl -I https://yoursite.com/icon.avif 是否返回 Content-Type: image/avif
  • 若返回 text/htmltext/plain,说明没匹配上:优先检查 types 是否漏写、拼写错误(比如 wof2 少了个 f)、或 include 路径不对
  • 注意 location ~* \.(js|css)$ 这类正则块里若没继承 types,需确认其所在作用域是否包含或可访问到 types

ThinkPHP 等框架的特殊处理建议

ThinkPHP 项目常涉及混合资源(静态文件 + PHP 路由入口),MIME 配置要兼顾前后端。

  • 确保 default_type text/html; ——否则 /index.php 这类无后缀的入口可能被当成纯文本下载
  • server 块中内联完整 types,比全局复用 mime.types 更可控,尤其适用于前后端分离部署
  • 对 API 接口返回的 .json.api,明确映射为 application/json
  • 对日志、构建产物等非标准扩展(如 .log.wasm),提前补全映射

相关文章

PHP速学视频免费教程(入门到精通)
PHP速学视频免费教程(入门到精通)

PHP怎么学习?PHP怎么入门?PHP在哪学?PHP怎么学才快?不用担心,这里为大家提供了PHP速学教程(入门到精通),有需要的小伙伴保存下载就能学习啦!

下载

相关标签:

nginx

本站声明:本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系admin@php.cn

相关专题

更多
nginx 重启
nginx 重启

nginx重启对于网站的运维来说是非常重要的,根据不同的需求,可以选择简单重启、平滑重启或定时重启等方式。本专题为大家提供nginx重启的相关的文章、下载、课程内容,供大家免费下载体验。

2023.07.27

363

5

nginx 配置详解
nginx 配置详解

Nginx的配置是指设置和调整Nginx服务器的行为和功能的过程。通过配置文件,可以定义虚拟主机、HTTP请求处理、反向代理、缓存和负载均衡等功能。Nginx的配置语法简洁而强大,允许管理员根据自己的需要进行灵活的调整。php中文网给大家带来了相关的教程以及文章,欢迎大家前来学习阅读。

2023.08.04

2987

6

nginx配置详解
nginx配置详解

NGINX与其他服务类似,因为它具有以特定格式编写的基于文本的配置文件。本专题为大家提供nginx配置相关的文章,大家可以免费学习。

2023.08.04

5465

6

tomcat和nginx有哪些区别
tomcat和nginx有哪些区别

tomcat和nginx的区别:1、应用领域;2、性能;3、功能;4、配置;5、安全性;6、扩展性;7、部署复杂性;8、社区支持;9、成本;10、日志管理。本专题为大家提供相关的文章、下载、课程内容,供大家免费下载体验。

2024.02.23

541

5

nginx报404怎么解决
nginx报404怎么解决

当访问 nginx 网页服务器时遇到 404 错误,表明服务器无法找到请求资源,可以通过以下步骤解决:1. 检查文件是否存在且路径正确;2. 检查文件权限并更改为 644 或 755;3. 检查 nginx 配置,确保根目录设置正确、没有冲突配置等等。本专题为大家提供相关的文章、下载、课程内容,供大家免费下载体验。

2024.07.09

1436

5

Nginx报404错误解决方法
Nginx报404错误解决方法

解决方法:只需要加上这段配置:try_files $uri $uri/ /index.html;即可。想了解更多Nginx的相关内容,可以阅读本专题下面的文章。

2024.08.07

3898

3

nginx部署php项目教程汇总
nginx部署php项目教程汇总

本专题整合了nginx部署php项目教程汇总,阅读专题下面的文章了解更多详细内容。

2026.01.13

102

12

nginx配置文件详细教程
nginx配置文件详细教程

本专题整合了nginx配置文件相关教程详细汇总,阅读专题下面的文章了解更多详细内容。

2026.01.13

397

23

Nginx跨平台安装实操指南:Windows、macOS与Linux环境快速搭建
Nginx跨平台安装实操指南:Windows、macOS与Linux环境快速搭建

本指南详解Nginx在Windows、macOS及Linux系统的安装全流程。涵盖官方包解压、Homebrew一键部署、APT/YUM源配置及Docker容器化方案。无论新手或开发者,均可快速搭建运行环境,掌握跨平台核心指令,为后续配置与调优奠定坚实基础。

2026.03.16

139

12

热门下载

更多
网站特效
/
网站源码
/
网站素材
/
前端模板

精品课程

更多
相关推荐
/
热门推荐
/
最新课程
phpEnv手册
phpEnv手册

共0课时 | 0人学习

nginx手册
nginx手册

共0课时 | 0人学习

进程与SOCKET
进程与SOCKET

共6课时 | 0.5万人学习