在本地开发中禁用Chrome的严格MIME类型检查

Question

我有一个CSS文件，我的本地开发服务器（webpack）提供的mime类型似乎是错误的。

Refused to apply style from 'http://localhost:10001/font-awesome/css/font-awesome.min.css' 
because its MIME type ('text/html') is not a supported stylesheet MIME type, 
and strict MIME checking is enabled.

有没有办法禁用这个？我猜测这是Chrome的一个设置。至少针对特定的主机。

深入挖掘webpack配置，如果它不做一些基本的事情，比如这样，通常会让人感到沮丧。

大多数其他答案都涉及修复服务器的方法。我只想黑客这个客户端，因为服务器很顽固。

相关:

- 禁用Chrome严格的MIME类型检查 - 链接并执行托管在GitHub上的外部JavaScript文件

- dcsan

---

你可以查看chrome://flags/，例如 chrome://flags/#allow-insecure-localhost 可以帮助处理证书问题，但我找不到一个用于忽略mime类型不匹配的选项。 - dcsan

Answer 1

您的问题发表于一段时间之前，但在Google上对这个问题排名很高，因此我想提供一些指针。

可能是伪装的HTTP/404错误

错误信息可能会误导您。遗憾的是，Google Chrome完全删除了响应，甚至是“网络”开发面板的预览。

MIME类型可能不正确，因为服务器正在用HTTP 404消息回复。
测试方法：直接在浏览器中打开CSS文件的URL，或使用像wget这样的工具获取它。

您是否检查过路径是否正确？根据您的配置，css文件可能不在原来的位置（假设不是webpack或其配置的问题）。

我只能猜测正确的URL可能是什么...
http://localhost:10001/node_modules/font-awesome/css/font-awesome.min.css
http://localhost:10001/css/font-awesome/font-awesome.min.css
http://localhost:10001/css/font-awesome.min.css
http://localhost:10001/font-awesome.min.css

检查请求头

通常情况下，不仅是在CSS响应的情况下：
请求标头可以准备好优雅地回退，如果通过text/html响应（例如，默认Apache 404页）
Accept: text/css, text/plain, */*

但是您不应该将*/*配置为每个请求都接受。即使在本地开发环境中，这并不总是有用-应该尽早修复错误类型的响应。

框架为什么希望优雅地处理它

服务器可能会传递正确的答案，但却带有不正确的Content-Type头。 框架假设服务器“一定想要application/json”，并让JSON解析器为其工作。

如果这样可以工作，框架可以忽略不正确的Content-Type而仍然正常运行。
主要是为了在共享托管环境上运行，因为编辑.htaccess设置可能是不可能的。
如果您的应用程序更严格地处理内容类型，则可以处理此类错误，但也可能需要花费一些时间进行调试。

相关答案

如果这些内容无法帮助您，以下回答对我很有帮助：
由于MIME类型而未加载样式表

- Peter Krebs

---

感谢您久违的回复。我不再拥有那个环境设置，所以有点难以检查，但下次我会知道的！ - dcsan

典型案例。将SAML HTTP响应（HTML）转换为CSS或JS请求。 - Alain Pannetier

谢谢，你帮我省了不少时间。 - Vahid

Answer 2

我遇到了同样的问题，尝试了许多不同的方法，但问题是我没有将devServer属性添加到webpack.config.js模块导出中。

module.exports = {
    entry: src + '/js/index.js',
    output: {
        path: dist,
        filename: 'js/bundle.js'
    },
    devServer: {
        contentBase: './dist'
    }
}

在这段代码中，如果没有添加devServer配置，我会遇到404和Mime类型问题，

添加后问题得到解决。

希望它能帮助其他人解决故障。

- Rao Abid

Answer 3

尝试强制刷新或清空缓存并强制刷新页面。

操作步骤如下：

1. 打开检查（CTRL + SHIFT + I）。
2. 右键单击刷新按钮（位于地址栏之前），然后选择适当的选项。

- vighnesh153

---

为什么那个有效？ - leech