我正在开发一个用于研究的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,但它确实支持无服务器功能