本地开发遇MIME类型错误，如何禁用Chrome严格MIME类型检查？

首先，先回应你关于Chrome严格MIME检查的问题：

Chrome严格MIME检查的禁用方法 #

全局临时禁用（仅适合本地开发临时测试） #

这种方式会关闭Chrome的跨域及MIME安全校验，绝对不要用这个窗口浏览外部网站，用完务必关闭该Chrome实例：

• Windows：先关闭所有Chrome窗口，打开命令提示符运行：

  chrome.exe --disable-web-security --user-data-dir="C:/ChromeDevSession"
  

• Mac：关闭所有Chrome窗口，打开终端运行：

  open -a Google\ Chrome --args --disable-web-security --user-data-dir="/tmp/chrome_dev"
  

• Linux：关闭所有Chrome窗口，在终端运行：

  google-chrome --disable-web-security --user-data-dir="/tmp/chrome_dev"
  

针对特定主机的设置 #

很遗憾，Chrome目前没有原生支持针对单个主机禁用严格MIME检查的选项——毕竟这类安全限制是为了防范恶意资源注入，针对性放开的场景极少，官方没有做这个功能。所以更推荐你从Webpack配置层面解决问题，你提到这类基础问题通常有常见诱因，确实没错，下面是几个最容易踩的坑：

Webpack Dev Server的常见排查方向 #

1. 静态资源路径配置错误 #

这是最常见的原因：当你请求的font-awesome.min.css路径不对时，Webpack Dev Server找不到资源，就会返回项目入口HTML文件（尤其是开启historyApiFallback的情况下），而HTML的MIME类型是text/html，自然触发浏览器报错。

• 检查Webpack配置中的static（Webpack 5）或contentBase（Webpack 4）是否包含font-awesome所在的目录；
• 确认publicPath设置是否正确，比如静态资源都放在/static/下，publicPath就该设为/static/，避免资源请求路径错位。

2. CSS文件的Loader配置缺失 #

如果是通过import引入的CSS文件，Webpack需要对应Loader处理：

• 确保已安装style-loader和css-loader，并在module.rules中配置：

  module: {
    rules: [
      {
        test: /\.css$/i,
        use: ['style-loader', 'css-loader'],
      },
    ],
  }
  

  开发环境下style-loader会把CSS注入到JS中，避免单独请求CSS文件；如果是生产环境用mini-css-extract-plugin，也要确保插件配置正确，能正确输出CSS文件并设置合法的MIME类型。

3. historyApiFallback的影响 #

如果你的项目是单页应用且开启了historyApiFallback: true，当请求的资源不存在时，服务器会返回index.html。如果font-awesome路径写错，就会触发这个逻辑，返回HTML而非CSS文件。你可以临时关闭historyApiFallback测试，若报错消失，就说明是路径问题。

4. 第三方资源的引入方式 #

如果是直接在HTML中用<link>标签引入font-awesome的CSS，要确保路径是Webpack Dev Server能正确访问到的。比如通过npm安装的font-awesome，路径应该类似/node_modules/font-awesome/css/font-awesome.min.css，同时要确保Webpack Dev Server能访问node_modules目录（可通过static配置添加该路径）。

总的来说，禁用Chrome安全检查只是临时 workaround，解决Webpack配置问题才是长久之计——这类MIME类型错误几乎都是资源路径或Loader配置的问题，排查起来很快的。

内容的提问来源于stack exchange，提问作者dcsan