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



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

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

我从github repo访问了您在vercel中的部署,并注意到了这个问题。

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

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

它可能只是通过更改你的网址以使用https来修复,或者如果API没有https,你可能需要做其他解决方法。(虽然最好使用支持https的API(

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

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

[EDIT 1]我通读了存储库中的一些代码,注意到有一个指向localhost的链接。看起来你试图通过https 设置一个nodejs服务器来代理数据

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

结论:

  • 请尝试在react代码中将API的链接更改为https,而不是http,看看它是否有效。如果是这样,就不需要自己的后端服务器
  • 但是,如果API不支持HTTPS,请执行
    • 迁移到支持HTTPS的其他API
    • 尝试通过后端提供静态react应用程序,并将react应用指向没有绝对url的/path/to/api/route,并使用此处所述的package.json中的代理设置进行开发
    • 指向internet上后端服务器的完整路径(即删除localhost链接(

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

相关内容

  • 没有找到相关文章

最新更新