使用 Javascript 将 React 应用程序作为小部件嵌入失败，并在 Firefox 和 Chrome 上显示不同的消息
Embedding React app as a widget with Javascript is failing with different messages on Firefox and Chrome
按照此 site 上的步骤，我可以使用 iframe 将 React 应用程序作为小部件嵌入到另一个站点：
<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 '<'
以下是我嵌入 React 应用程序的代码：
<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 的回答，我将我的源文件指定为反应生成操作生成的文件。如何指定正确的 js 文件来解决我的问题？
I can confirm that the js source I specified is correct and running
感谢您发布该屏幕截图，因为它对于找出问题所在至关重要。与您所说的相反，JS 来源不正确。您的 JavaScript 源只是一个文本文件，它不能 运行 在浏览器中单独使用。
这意味着当您查看 JavaScript 源文件时，您应该看到源代码，而不是工作应用程序。
然而，在您的屏幕截图中，它显示的是实际应用程序，而不是 JavaScript 来源。
您实际得到的是一个 HTML 页面。当找不到您请求的文件时，您的开发服务器可能会提供此页面。所以它将索引页作为后备。
下次在确认是否正确的时候，我建议你有意地弄错，然后看看结果是否不同？
在帮助下弄清楚了 - 问题是由于我创建构建的方式造成的。
我们不能使用 CRA 自带的默认构建工具。请改用 rescripts/cli。
- 安装@rescripts/cli作为开发依赖：
npm install @rescripts/cli --save-dev
更新 package.json "scripts" 至 运行 'rescripts':
"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>
按照此 site 上的步骤，我可以使用 iframe 将 React 应用程序作为小部件嵌入到另一个站点：
<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 '<'
以下是我嵌入 React 应用程序的代码：
<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 的回答，我将我的源文件指定为反应生成操作生成的文件。如何指定正确的 js 文件来解决我的问题？
I can confirm that the js source I specified is correct and running
感谢您发布该屏幕截图，因为它对于找出问题所在至关重要。与您所说的相反，JS 来源不正确。您的 JavaScript 源只是一个文本文件，它不能 运行 在浏览器中单独使用。
这意味着当您查看 JavaScript 源文件时，您应该看到源代码，而不是工作应用程序。
然而，在您的屏幕截图中，它显示的是实际应用程序，而不是 JavaScript 来源。
您实际得到的是一个 HTML 页面。当找不到您请求的文件时，您的开发服务器可能会提供此页面。所以它将索引页作为后备。
下次在确认是否正确的时候，我建议你有意地弄错，然后看看结果是否不同？
在帮助下弄清楚了 - 问题是由于我创建构建的方式造成的。
我们不能使用 CRA 自带的默认构建工具。请改用 rescripts/cli。
- 安装@rescripts/cli作为开发依赖：
npm install @rescripts/cli --save-dev
更新 package.json "scripts" 至 运行 'rescripts':
"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>