时间戳

首页 > 解决方案 > 使用 Javascript 将 React 应用程序嵌入为小部件失败，并在 Firefox 和 Chrome 上显示不同的消息

javascript - 使用 Javascript 将 React 应用程序嵌入为小部件失败，并在 Firefox 和 Chrome 上显示不同的消息

问题描述

按照本网站上的步骤，我可以使用 iframe 在另一个网站上将反应应用程序作为小部件嵌入：

<html>
  <iframe src="http://localhost:3000"><iframe>
</html>

嵌入 Javascript（第二种方法）在 Firefox 上失败并显示以下错误消息：

The script from “http://localhost:3000/static/js/main.dbfc58d6.chunk.js” was loaded even though its MIME type (“text/html”) is not a valid JavaScript MIME type.
SyntaxError: expected expression, got '<'

以下是我嵌入反应应用程序的代码：

<html lang="en">    
<body><noscript>You need to enable JavaScript to run this app.</noscript>
  <div id="root"></div>
  <script type="text/javascript" src="http://localhost:3000/static/js/main.dbfc58d6.chunk.js"></script>
</body>    
</html>

我可以确认我指定的 js 源是正确的并且正在运行： 在此处输入图像描述

在 Chrome 上，警告消息显示如下：

index.html:1 A cookie associated with a cross-site resource at http://localhost/ was set without the `SameSite` attribute. A future release of Chrome will only deliver cookies with cross-site requests if they are set with `SameSite=None` and `Secure`. You can review cookies in developer tools under Application>Storage>Cookies and see more details at https://www.chromestatus.com/feature/5088147346030592 and https://www.chromestatus.com/feature/5633521622188032.
index.html:10 Cross-Origin Read Blocking (CORB) blocked cross-origin response http://localhost:3000/static/js/main.dbfc58d6.chunk.js with MIME type text/html. See https://www.chromestatus.com/feature/5629709824032768 for more details.

寻求指导以解决此问题。感谢您的阅读。

更新：参考@Thai 的回答，我将我的源文件指定为由 react 构建操作生成的文件。如何指定正确的 js 文件来解决我的问题？ 在此处输入图像描述

标签： javascriptwidgetcreate-react-app

解决方案

我可以确认我指定的 js 源是正确的并且正在运行

感谢您发布该屏幕截图，因为这对于找出问题所在至关重要。与您所说的相反，JS 来源不正确。您的 JavaScript 源代码只是一个文本文件，它不能在浏览器中自行运行。

这意味着当您查看 JavaScript 源文件时，您应该看到源代码，而不是正在运行的应用程序。

如果 JavaScript 文件的 URL 正确，您应该会看到 JavaScript 代码而不是工作应用程序

但是，在您的屏幕截图中，它显示的是实际应用程序，而不是 JavaScript 源代码。

浏览器截图

您实际上得到的是一个 HTML 页面。当找不到您请求的文件时，您的开发服务器可能会提供此页面。所以它将索引页面作为后备。

下次在确认是否正确的时候，可不可以建议你故意弄错，然后看看结果有没有不同？

推荐阅读