时间戳

首页 > 解决方案 > 如何通过 Vercel 或 heroku 部署 React 网站？

reactjs - 如何通过 Vercel 或 heroku 部署 React 网站？

问题描述

我正在开发一个用于研究的 React 项目并希望发布。我尝试了一些方法，但网站是空白的，我正在使用的 NEWS-API 没有数据。似乎没有错。它是一个前端应用程序，仅与 API 反应。

如果有帮助，这里是存储库链接。 https://github.com/carlos-souza-dev/apinews

标签： reactjsapiherokudeploymentvercel

解决方案

我从您的 github 存储库访问了您在 vercel 中的部署，并注意到了这个问题。

您通过不安全的 http 从 API 请求数据，而由 vercel 托管的页面使用 https。

现代浏览器不允许通过 https 服务的页面请求 http 数据。

它可能只是通过将您的 url 更改为使用 https 来修复，或者如果 API 没有 https，您可能必须执行其他解决方法。（尽管最好使用支持 https 的 API）

Mixed content requests blocked我在访问您的页面后打开控制台以查看这些错误时注意到了这一点。

加载后出现空白页面的原因是Promise从 API 获取数据被拒绝但从未处理导致 JavaScript 执行停止

[编辑 1] 我通读了您存储库中的一些代码，并注意到一个指向 localhost 的链接。看起来您尝试设置 nodejs 服务器以通过 https 代理数据

您使用的 API 似乎确实支持 HTTPS

结论：

  • 尝试在您的反应代码中将 API 的链接更改为 https 而不是 http，看看它是否有效。如果是这样，则不需要您自己的后端服务器
  • 但是，如果 API 不支持 HTTPS，请执行以下任一操作
    • 迁移到具有 HTTPS 支持的不同 API
    • 尝试通过后端为您的静态反应应用程序提供服务，并将您的反应应用程序指向/path/to/api/route没有绝对 URL 并使用此处package.json所述的代理设置进行开发
    • 指向 Internet 上后端服务器的完整路径（即删除 localhost 链接）

另请注意，您无法将后端部署到 vercel，但它确实支持无服务器功能

推荐阅读