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

Question

按照本网站上的步骤，我可以使用 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 文件来解决我的问题？

Answer 1

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

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

这意味着当您查看 JavaScript 源文件时，您应该看到源代码，而不是工作应用程序。

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

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

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

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

Answer 2

在帮助下解决了这个问题 - 问题是由于我创建构建的方式造成的。

我们不能使用 CRA 自带的默认构建工具。 请改用rescripts/cli 。

安装 @rescripts/cli 作为开发依赖项：

npm install @rescripts/cli --save-dev

更新 package.json “脚本”以使用“脚本”运行：
"scripts": { "start": "rescripts start", "build": "rescripts build", "test": "rescripts test", "eject": "rescripts eject" },
构建您的应用程序

npm run buiild

嵌入应用程序：
<script src="https://localhost:3000/static/js/bundle.js"></script>

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

问题描述

2 个解决方案

解决方案1
2 2020-05-24 09:59:20

解决方案2
0 已采纳 2020-05-27 07:50:37

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

问题描述

2 个解决方案

解决方案1 2 2020-05-24 09:59:20

解决方案2 0 已采纳 2020-05-27 07:50:37

解决方案1
2 2020-05-24 09:59:20

解决方案2
0 已采纳 2020-05-27 07:50:37