React.js应用部署后在GCP/Heroku/Netlify无法拉取OMDB电影数据
部署后OMDB电影搜索无返回问题排查指引
- 跨域请求拦截问题
本地开发阶段React应用会通过dev server的代理规则转发接口请求,自动绕开浏览器跨域校验逻辑;生产部署环境没有内置代理时,前端直接从托管站点域名向OMDB接口发请求,会被浏览器同源策略阻断,请求根本无法送达OMDB服务端,页面不会弹出显性报错也不会返回搜索结果。 - 生产环境环境变量缺失问题
本地运行时读取的OMDB接口密钥、接口地址一般存放在本地.env配置文件中,生产构建过程中如果没有在托管平台的构建配置里填入对应的自定义环境变量,且自定义变量没有遵循React项目要求的REACT_APP_前缀规范,最终打包的代码里会缺失请求必需的鉴权参数,OMDB接口会直接返回鉴权失败的空响应,前端没有做错误提示时就会表现为搜索无结果。 - HTTPS混合内容拦截问题
当前部署站点为HTTPS协议,如果代码中硬编码的OMDB接口请求地址为HTTP协议,浏览器会直接拦截这类跨协议的不安全请求,导致请求无法发出。需要将所有OMDB接口请求地址统一替换为HTTPS协议开头的官方地址。 - 接口来源限流问题
本地开发请求的出口IP为日常网络IP,托管平台部署的应用出口IP为服务商的服务器集群IP段,如果该IP段因历史请求量触发OMDB接口的频率限制,接口会直接返回空结果,不会提供有效电影条目。
内容的提问来源于stack exchange,提问作者cosmicRover
相关产品推荐
相关产品推荐

