Question

我正在关注一个反应应用程序的基本教程，并在浏览器中遇到此错误。

＆＃34;拒绝执行脚本＆＃39; http://localhost:8080/bundle.js＆＃39;因为它的MIME类型（＆＃39; text / html＆＃39;）不可执行，并且启用了严格的MIME类型检查。＆＃34;

我无法在网上找到任何此错误的支持，并希望了解问题所在。我花了大约2个小时试图调试。一个论坛提到它是浏览器中的cookie，但这不是问题所在。我相信它可能与我的index.html文件有关：

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8">
    <title>ReactJS Sample Project</title>
  </head>
  <body>
    <div id="root"></div>
    <script type="text/javascript" src="bundle.js"></script>
  </body>
</html>

如果您有任何想法，请告诉我！我对编码比较陌生，在一个项目的早期阶段遇到死胡同是令人沮丧的。

Answer 1

浏览器要求服务器为其提供bundle.js。

然后服务器响应“这是bundle.js，它是一个HTML文档”。

这意味着以下两件事之一：

这是一个HTML文档（带有奇数URL）
这是一个JS文件，但服务器认为它是HTML

要做的第一件事是查看文件中的数据。您可以通过查看浏览器中开发人员工具中的“网络”选项卡来执行此操作。

如果是JS，那么您需要修复服务器，以便为JavaScript发送正确的Content-Type标头（application/javascript）。

如果不是JS，你需要找出原因。可能你的网址错误了。可能没有设置服务器，所以它可以为你的JS提供服务。

无论出现什么问题，您都需要检查HTTP服务器，而不是问题中共享的客户端代码。

Answer 2

如果您正在开发单页HTML5应用程序，则可能是默认服务器配置为针对未找到的每个资源（而不是404）发回index.html，以便为应用程序中的每个虚拟路径启用整页刷新。现在，如果由于任何原因不存在bundle.js，那么您将获得合法的html响应。您必须调试您的应用程序，或者至少告诉我们您正在使用的内容的更多详细信息。

要调试应用程序，请打开开发人员工具，转到网络面板，然后刷新页面以查看正在加载的资源。

Answer 3

使用类似npm的程序包管理器时，似乎会出现此问题。以下堆栈溢出答案为我解决了这个问题。您只需要使用CDN链接使用标签即可。

How to use Tesseract.js in a React app

Answer 4

如果在开发人员工具中打开“网络”选项卡并查看错误（可能在“网络”的“标题”选项卡中），您会看到它试图从中获取bundle.js文件的URL。如果您使用的是客户端路由，答案可能很简单，即在bundle.js前面加一个斜杠（即src =“ / bundle.js”）。

反应浏览器错误（MIME类型不可执行）

4 个答案: