对本地开发禁用 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 配置，如果它不做像这样的基本操作，通常是令人沮丧的剃毛练习。

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

相关：

Link and execute external JavaScript file hosted on GitHub

Answer 1

你的问题是不久前提出的，但在 Google 上这个问题的排名很好，所以我想补充几点。

可能是伪装的HTTP/404

错误消息可能只是误导您。不幸的是 Google Chrome 完全删除了响应，甚至 "Network" 开发面板的预览。

MIME 类型可能不正确，因为服务器正在使用 HTTP 404 消息进行应答。
测试：直接在浏览器中打开URL到CSS文件，或者用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

正在检查请求header

一般而言，不仅仅是 CSS 回复：
如果 text/html 响应通过（例如默认的 Apache 404 页面），请求 headers 可以准备好优雅地回退。
Accept: text/css, text/plain, */*

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

Why frameworks want to handle this gracefully

The server may deliver the correct answer, but with an incorrect Content-Type header. The framework assumes the server "must have meant application/json" and lets the JSON parser to its thing anways.

If this works, the framework can just ignore the incorrect Content-Type and still function.
The goal of this is mainly to run on shared hosting environments where editing .htaccess settings may be impossible.
It's ok if your application handles content types more strict, with the drawback of debugging errors like this from time to time.

相关回答
如果这没有帮助，这里的答案对我有帮助：
Stylesheet not loaded because of MIME-type

Answer 2

尝试硬重新加载或清空缓存并硬重新加载页面。

为此：

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

Answer 3

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

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

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

添加这个解决了错误。

希望它能帮助某人解决问题。

对本地开发禁用 chrome 严格的 MIME 类型检查

disable chrome strict MIME type checking on local dev

google-chrome

mime-types

webpack