出现MIME type (‘text/html’) is not a supported stylesheet MIME type错误的解决办法

搬主题在最近访问站点的时候，发现浏览器给出错误提示“MIME type ('text/html') is not a supported stylesheet MIME type”的问题。搬主题找了很久的解决办法才搞定，这里搬主题就分享一下解决办法。

首先出现错误提示一般如下：

Refused to apply style from 'https://www.banzhuti.com/css.css' because its MIME type ('text/html') is not a supported stylesheet MIME type, and strict MIME checking is enabled

翻译成中文就是

因为它的 MIME 类型（'text/html'）不是受支持的样式表 MIME 类型，并且启用了严格的 MIME 检查。

最终导致的结果就是，你的文件被拒绝了，如果是CSS文件，意味着浏览器拒绝了CSS文件，然后你的网站都是没有样式的，只有文字，布局及美化都没了。

这个错误提示表明浏览器拒绝应用样式表文件，因为它的 MIME 类型为 'text/html'，而严格的 MIME 检查是启用的。这通常发生在使用 Angular 或其他前端框架时，浏览器无法正确加载样式文件。

要解决这个问题，你可以采取以下步骤：

1. 确保你正确地引用了样式表文件。检查 <link> 标签或 CSS 文件的路径是否正确，并确保路径指向正确的样式表文件。
2. 检查样式表文件的服务器响应头中的 MIME 类型。确保服务器正确地将样式表文件的 MIME 类型设置为 'text/css'。可以通过查看服务器响应头或联系服务器管理员来进行确认和调整。
3. 检查 Angular 应用的配置和构建设置。确保在构建过程中生成的样式表文件被正确地标记为 'text/css' 类型。检查构建配置文件（如 angular.json 或 webpack.config.js）中的相关设置。
4. 如果你正在使用代理服务器或 CDN，确保代理服务器或 CDN 配置正确，并且将样式表文件的 MIME 类型正确地传递到客户端。

通过以上步骤，你应该能够解决该错误，并使浏览器能够正确加载和应用样式表文件。如果问题仍然存在，可以进一步检查浏览器的安全设置或尝试在其他浏览器中查看是否有类似的问题。

网上的各种方法搬主题都试了一下，总之没有很好的解决。这个时候有人给出了一个很特别的解决办法，就是

在连接所有的css文件之前，在head部添加<base href="/"> 

其实是有了上述的代码后就可以解决，其实就是相对路径和绝对路径有时候出错的解决办法。

因为在 HTML 文档中添加 <base href="/"> 标签的作用是指定基准 URL，它会影响到页面上所有相对 URL 的解析。

当浏览器加载页面时，它会使用基准 URL 来解析所有相对路径的资源，如 CSS、JavaScript、图像等。通过在 <base> 标签中设置基准 URL 为根路径 /，浏览器会将所有相对路径解析为相对于根路径的绝对路径。

在处理 CSS 文件时，CSS 中可能包含相对路径的引用，比如背景图像、字体文件等。如果没有正确设置基准 URL，浏览器可能会尝试使用相对于当前 URL 的路径来解析这些资源，导致路径错误或无法加载。

通过添加 <base href="/"> 标签，你将基准 URL 设置为根路径，这样浏览器在解析相对路径资源时会始终将其作为相对于根路径的绝对路径解析，确保正确的资源加载路径。

总结起来，通过设置基准 URL，你告诉浏览器将所有相对路径解析为相对于根路径的绝对路径，从而解决 CSS 文件中相对路径资源加载错误的问题。

Tags：SSH教程   WordPress教程   其他教程

转载：感谢您对Jerbo个人博客网站平台的认可，以及对我们原创作品以及文章的青睐，非常欢迎各位朋友分享到个人站长或者朋友圈，但转载请说明文章出处“来源Jerbo个人博客”。/web/wordpress/283.html

很赞哦！ ()