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

Question

我正在开发一个React研究项目，并希望发布。 我尝试了一些方法，但是该网站是空白的，没有任何来自我使用的NEWS-API的数据。 看来没有错。 这是一个前端应用程序，仅与API配合。

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

Answer 1

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

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

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

通过更改网址以使用https可能是固定的，或者如果API没有https，则可能必须执行其他解决方法。（最好使用具有https支持的API）

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

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

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

您使用的API似乎支持HTTPS

结论：

• 尝试在您的反应代码中将API的链接更改为https而不是http，然后查看其是否有效。如果是这样，则无需您自己的后端服务器
• 但是，如果API不支持HTTPS，请执行以下任一操作
  • 迁移到具有HTTPS支持的其他API
  • 尝试通过后端提供静态React应用，并在没有绝对URL的情况下将React应用指向/path/to/api/route，并按照here 的说明使用package.json中的代理设置进行开发
  • 指向互联网上后端服务器的完整路径（即删除localhost链接）

还请注意，您无法将后端部署到vercel，但它支持serverless functions