拒绝执行脚本 runtime.js，因为 MIME 类型不可执行

Posted

技术标签:

【中文标题】拒绝执行脚本 runtime.js，因为 MIME 类型不可执行【英文标题】：Refused to execute script runtime.js because MIME type is not executable 【发布时间】：2019-02-18 18:58:59 【问题描述】：

这是我在执行浏览器检查时遇到的错误 -> index.html 文件的控制台选项卡。

拒绝执行来自“http://localhost:63342/runtime.js”的脚本 因为它的 MIME 类型 ('text/html') 是不可执行的，并且严格的 MIME 类型检查已启用。

我的应用是 spring-boot 和 Angular 的集成。 我相信这也是 spring-boot 没有在 UI 上提供前端 js 和 .html 文件内容的原因。 虽然后端应用程序工作正常，但在 tomcat 服务启动时，它没有显示任何 UI http://localhost:8080.

Angular CLI: 6.0.8
Node:10.0.0
OS: darwin x64
Angular: 6.1.7

生成的 index.html 有标签：

<script type="text/javascript" src="runtime.js"></script>
<script type="text/javascript" src="polyfills.js"></script>
<script type="text/javascript" src="styles.js"></script>
<script type="text/javascript" src="vendor.js"></script>
<script type="text/javascript" src="main.js"></script>

手动将类型更改为“text/html”可解决错误，但仍不会在 UI 上显示任何内容。 这是由于特定的 angular-cli 版本造成的问题吗？我的两个问题（弹簧不提供前端静态资源）是否相关？还是 base href 错误？ 如果不手动更改脚本标签中的类型，有没有办法解决这个问题？因为 index.html 在运行ng build 时生成并被放置在资源目录中。我这样做是为了使部署更容易。这是整个生成的 index.html 文件：

<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>Welcome App</title>
  <base href="/">

  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="icon" type="image/x-icon" href="favicon.ico">
</head>
<body>
  <app-root></app-root>
<script type="text/javascript" src="runtime.js"></script><script type="text/javascript" src="polyfills.js"></script><script type="text/javascript" src="styles.js"></script><script type="text/javascript" src="vendor.js"></script><script type="text/javascript" src="main.js"></script></body>
</html>

我是这方面的新手，请提供帮助。

这是我在浏览器检查 -> 网络 -> 标题中看到的（当从 Intellij 中的浏览器选项打开文件并且 tomcat 未运行时）。 生成的角度文件之一的响应标头：

HTTP/1.1 304 Not Modified
content-type: text/html
server: IntelliJ IDEA 2018.1.2
date: Sun, 16 Sep 2018 16:08:39 GMT
X-Frame-Options: SameOrigin
X-Content-Type-Options: nosniff
x-xss-protection: 1; mode=block

但是当 tomcat 启动并运行时，请注意检查 200 响应：

HTTP/1.1 200
Content-Type: application/json;charset=UTF-8

因为它的 app/json 和我看到 [ ] 作为响应，我认为这是错误的，应该是一个 html 响应。

这些在 ng build in index.html 上添加的脚本标签是否会导致无法在 UI 或其他内容上显示内容？我不这么认为，因为我复制粘贴了我的静态内容在一个演示 gradle 项目中（来自https://start.spring.io/），它在网页上显示 UI，所以我相信将“text/javascript”更改为“html”并不是一个真正的问题；但不确定。这就是我对工作 UI 的回应：

HTTP/1.1 200
Accept-Ranges: bytes
Content-Type: text/html;charset=UTF-8

有什么建议吗？

【问题讨论】：

试试this? 您的网络服务器正在发送具有错误 mime 类型的 javascript 文件。粘贴响应的 contentType 标头。 @Rafael 感谢您的回复。我编辑了帖子（在底部）以放置响应标题。注意：这个粘贴的响应头是在将脚本类型更改为“text/html”之前。所以目前它的“文本/javascript” @SoC 更改&lt;script&gt; 标签的type 属性将一事无成。您需要重新配置您的服务器，以便它为带有 content-type: text/javascript HTTP 标头的 .js 文件提供服务。 @Bergi 我同意你的看法，这就是为什么将我的类似想法发表在帖子中。但是，我不确定如何重新配置​​服务器以提供 .js 文件。 【参考方案1】：

如果您使用的是 apache2，请检查 /etc/apache2/ 中的 apache2.conf

确保你有这一行：

AddType text/javascript .js

确保 mod:mime 已安装并启用：

sudo a2enmod mime

【讨论】：

以上是关于拒绝执行脚本 runtime.js，因为 MIME 类型不可执行的主要内容，如果未能解决你的问题，请参考以下文章

拒绝执行脚本，因为它的 MIME 类型 ('text/html') 不可执行，并且启用了严格的 MIME 类型检查

拒绝执行脚本，因为它的 MIME 类型 ('text/html') 不可执行并且启用了严格的 MIME 类型检查

拒绝从 '*' 执行脚本，因为它的 MIME 类型 ('application/json') 不可执行，并且启用了严格的 MIME 类型检查

拒绝从“*”执行脚本，因为它的 MIME 类型（'text/HTML'）不可执行

拒绝从 URL 执行脚本，因为它的 MIME 类型 ('application/json') 不可执行，并且启用了严格的 MIME 类型检查

拒绝从 'url' 执行脚本，因为它的 MIME 类型（'application/json'）不可执行