typescript - 如何从 PWA 中的 HTTP url 读取内容而不会出现“混合内容”错误

Question

我在 React/Typescript 中开发了一个渐进式 Web 应用程序（从 HTTPS url 提供服务），它将在离线模式下在平板电脑上的 Chrome 中运行。它将用于从测量设备收集数据。

它将按如下方式工作：

• 在平板电脑上运行测量设备制造商的应用程序，该应用程序通过蓝牙读取设备收集的测量值
• 该应用程序“呈现”/“提供”该数据，例如。网址http://localhost:53757/data
• 因此，当您在平板电脑上使用浏览器导航到该 url 时，您会看到（纯文本或 json）数据
• 我编写的 React 应用程序应该能够“读入”该数据并对其进行处理

因此，我尝试以编程方式从该 url http://localhost:53757/data获取该数据（使用fetch调用），但（当然）我得到了错误

“混合内容：‘ https://blablablah ’的页面是通过 HTTPS 加载的，但请求了不安全的资源‘ http://localhost:53757/data ’。此请求已被阻止；内容必须通过 HTTPS 提供。 "

我已经阅读了几篇关于 CORS 的文章并试图解决这个问题，但我没有找到可行的解决方案。

1. 无法通过 HTTPS 提供内容（制造商应用程序通过 HTTP 提供内容，我无法在服务器端进行任何更改）
2. 编写我自己的一些后端服务器代码从该 url 获取数据并将其提供（=传递）到我的应用程序是不可能的，因为我的 PWApplication 应该脱机工作（因此后端无法访问）
3. 在开发模式下，我在 url 前面加上例如。https://cors-anywhere.herokuapp.com/可以工作，但是 a) 这不是生产的好解决方案，b) 不能离线工作

我的问题：

1. 是否可以绕过 Chrome 阻止混合内容？
2. 如果是，在上述情况下应该如何做？

提前感谢您尝试提供帮助的任何尝试。

标签： typescriptgoogle-chromefetchprogressive-web-appsmixed-content