ionic/angular2 - 拒绝应用来自 'http://localhost:8100/build/main.css' 的样式，因为它的 MIME 类型（'text/html'）不受支持

Posted 2023-02-22

【中文标题】ionic/angular2 - 拒绝应用来自 \'http://localhost:8100/build/main.css\' 的样式，因为它的 MIME 类型（\'text/html\'）不受支持

【英文标题】：ionic/angular2 - Refused to apply style from 'http://localhost:8100/build/main.css' because its MIME type ('text/html') is not a supportedionic/angular2 - 拒绝应用来自 'http://localhost:8100/build/main.css' 的样式，因为它的 MIME 类型（'text/html'）不受支持

【发布时间】：2018-08-05 06:04:52

【问题描述】：

我的 ionic 构建一直运行良好，直到我想在我的 iPhone 上进行测试，所以我停止了我的服务器，然后执行了 ionic serve --address localhost，我注意到我的样式表不再加载......所以我再次关闭了服务器回到ionic serve，错误依旧..

(index):1 拒绝应用来自 'http://localhost:8100/build/main.css' 的样式，因为它的 MIME 类型 ('text/html') 不是受支持的样式表 MIME 类型，并且启用了严格的 MIME 检查。

我已尝试清除localhost:8100 上的缓存并重新构建项目，但错误仍然存​​在...

有什么想法吗？在这个问题得到解决之前，我几乎被困住了:(

编辑：我最终修复它的方式可能不是最好的......但至少它可以再次工作。我刚刚进入我的 github 存储库，我的应用程序下载了 main.css 并将其粘贴到 build 文件夹中，此后我没有遇到任何问题。

【参考方案1】：

您需要查看 index.html 文件并查找 .就像它在错误消息中所说的那样，你的必须设置为而不是。

您的 css 被导入为错误的类型。

【讨论】：

感谢您的评论.. 但是我的build/main.css 是这样链接的：<link href="build/main.css" rel="stylesheet"> 在index.html 内部是不是不正确？

老实说应该没问题。还是试试 type="text/css"。否则，一个疯狂的猜测是围绕 CORS 设置：blog.ionicframework.com/handling-cors-issues-in-ionic

【参考方案2】：

仅供参考，我在升级 webpack 后遇到了完全相同的问题。我的 webpack 版本是 ^3.11.0，然后转到 4.x.x，这导致了很多问题。建议你降级 webpack，直到 ionic 支持更新版本的 webpack。

【讨论】：

我认为这个需要得到更多的支持，因为这似乎与 web pack 相关联，并且按照@Christo Goosen 的建议调整版本效果很好。

【参考方案3】：

也许不是解决这个问题的最佳策略，但对我有用的是创建一个新的空白项目，手动安装所有额外的插件，然后将整个 src 文件夹替换为这个新项目。 config.xml 和 package.json 文件可能需要进行一些调整。

在命令中：

~user/DevFolder/ $ ionic start DummyProject blank
~user/DevFolder/ $ cd DummyProject
~user/DevFolder/DummyProject/ $ ionic cordova plugin add cordova-plugin-advanced-http
~user/DevFolder/DummyProject/ $ rm -fr src
~user/DevFolder/DummyProject/ $ cp -r ../FailingProject/src .
~user/DevFolder/DummyProject/ $ ionic serve -lcs

对于我使用 ~user/DevFolder 作为所有项目所在的文件夹的命令，以及 cordova-plugin-advanced-http 作为插件。记得在命令行需要时回答 Y。

至少对我来说问题已经解决了，但不知道为什么会这样。 希望对您有所帮助。

【参考方案4】：

我在使用 Ionic 3 时遇到了同样的问题。

为了解决问题，我在相应的标签中添加类型，如下所示：

<script type="application/javascript" src="assets/js/lalalala.js"></script>
<script type="application/javascript" src="assets/js/lalala.js"></script>

（在我的情况下，问题在于 JS） 然后，需要使用 "ionic serve" 重新启动应用程序，否则问题仍然存在。

【参考方案5】：

在我的情况下，只需保存我的 index.html 就可以解决问题。

另外，我必须撤消（删除）我的符号链接并使用来自类似姊妹项目的文件夹的实际副本。 :(

【参考方案6】：

我按照 ionic 框架论坛上发布的这些说明进行操作。

使用ionic serve 为您的项目提供服务，然后只需更改任何 .ts 文件并保存它 (ctrl+s)，它就会自动构建 再次提供应用程序和错误将得到解决，希望:)。

注意：你必须在每次初始离子发球时都这样做。

查看完整答案here

【参考方案7】：

我找到了解决方法，但不知道最终原因。 解决方案-> 只需转到任何 .ts 文件，如 user.ts 或 app.ts，然后按“CTRL+S”。 现在它会自动再次构建并为您的应用提供服务，一旦构建完成，您的应用就会运行良好。

每次在终端中编写新的“ionic serve”时，您都必须这样做。 但如果在开发周期中按“CTRL+S”自动构建，则不需要。

【参考方案8】：

我相信 Webpack（或其他包）可能存在一些兼容性问题。这似乎是在 @ionic/app-scripts 3.2.* 版本中引入的。使用最高 3.1.11 的任何版本都不会出现此问题。我建议执行以下操作：

在您的 package.json 中将 @ionic/app-scripts 的版本更改为“@ionic/app-scripts”： “^3.1.11” 删除 package-lock.json 文件 删除您的 node_module 文件夹 运行

npm 安装

确保@ionic/app-scripts 的版本低于 3.2