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

Question

Following the steps on this site I'm able to embed a react app as a widget at another site with iframe:按照本网站上的步骤，我可以使用 iframe 在另一个网站上嵌入一个反应应用程序作为小部件：

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

Embedding with Javascript (the second method) is failing with the following error message on Firefox:嵌入 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 '<'

Following is my code to embed the react app:以下是我嵌入反应应用程序的代码：

<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>

I can confirm that the js source I specified is correct and running:我可以确认我指定的 js 源是正确的并且正在运行：

On Chrome, the warning message is displayed as below:在 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.

Seeking guidance to solve this.寻求指导以解决此问题。 Thank you for reading.感谢您的阅读。

Update: Referring to @Thai's answer, I'm specifying my source file as the one generated by the react build operation.更新：参考@Thai 的回答，我将我的源文件指定为由 react 构建操作生成的文件。 How can I specify the right js file to solve my issue?如何指定正确的 js 文件来解决我的问题？

Answer 1

I can confirm that the js source I specified is correct and running我可以确认我指定的 js 源是正确的并且正在运行

Thanks for posting that screenshot, because it is crucial to figuring out what the problem is.感谢您发布该屏幕截图，因为这对于找出问题所在至关重要。 Contrary to what you said, the JS source is not correct.与您所说的相反，JS 来源不正确。 Your JavaScript source is just a text file, and it cannot run on its own inside a browser.您的 JavaScript 源代码只是一个文本文件，它不能在浏览器中自行运行。

This means that when you view the JavaScript source file, you should see the source code, and not a working application.这意味着当您查看 JavaScript 源文件时，您应该看到源代码，而不是工作应用程序。

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

However in your screenshot it shows the actual application and not the JavaScript source.但是，在您的屏幕截图中，它显示了实际应用程序，而不是 JavaScript 源。

What you're actually getting is an HTML page.您实际得到的是 HTML 页面。 Your development server probably serves this page when a file you requested couldn't be found.当找不到您请求的文件时，您的开发服务器可能会提供此页面。 So it serves the index page as a fallback.所以它将索引页面作为后备。

Next time, when confirming if something is correct, may I suggest that you try intentionally making it incorrect, and then see if the result differs?下次在确认是否正确的时候，可不可以建议你故意弄错，然后看看结果有没有不同？

Answer 2

Figured it out with assistance - the issue was due to the way I was creating the build.在帮助下解决了这个问题 - 问题是由于我创建构建的方式造成的。

We can't use the default build tool that comes with CRA.我们不能使用 CRA 自带的默认构建工具。 Use rescripts/cli instead.请改用rescripts/cli 。

Install @rescripts/cli as a dev dependency:安装 @rescripts/cli 作为开发依赖项：

npm install @rescripts/cli --save-dev

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

npm run buiild

Embed the app with:嵌入应用程序：
<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