Netlify部署的React天气项目API连接异常无法获取数据问题求助

项目基础信息 #

• GitHub仓库地址：https://github.com/herrbaha/reactweather
• 线上正式访问地址：https://reactweatherbaha.netlify.app/

故障排查方案 #

1. 环境变量配置校验 #

本地开发时存储在.env文件中的API密钥、API域名等配置项，一般会被.gitignore规则过滤不会上传到GitHub，Netlify无法直接读取到这些配置。
操作步骤：

• 进入Netlify对应项目的后台管理页，依次打开「Site settings」-「Environment variables」
• 把本地.env文件中所有带REACT_APP_前缀的变量完整录入，变量名、变量值必须和本地完全一致，大小写敏感
• 配置完成后重新触发一次项目部署，新配置才会生效

2. 跨域问题处理 #

本地开发阶段React脚手架自带的代理配置可以绕开API的跨域限制，部署到Netlify后本地代理规则会失效，就会出现跨域报错导致API拉取失败。可以通过Netlify代理规则解决：

• 在项目根目录新建_redirects文件，写入规则：/api/* https://你调用的目标天气API域名/:splat 200
• 修改项目代码中所有API请求的地址，把直接请求目标API的绝对路径替换为/api/xxx格式的相对路径
• 提交代码重新部署即可，Netlify会自动完成代理转发规避跨域限制

3. API访问权限校验 #

多数天气类API都有访问限制规则，需要逐一校验：

• 到API服务商的后台管理页，检查当前使用的API密钥是否还有可用请求额度、是否被封禁
• 检查API的域名白名单配置，把线上正式访问地址https://reactweatherbaha.netlify.app/添加到白名单中

4. 具体错误定位 #

如果上述配置都没有问题，可以通过浏览器开发者工具定位具体错误：

• 打开线上页面后按F12调出开发者工具，切换到「Network」面板刷新页面
• 找到失败的API请求条目，查看状态码和响应内容：返回401代表密钥配置错误，返回403代表域名不在白名单或者密钥无权限，返回404代表API请求路径填写错误，出现CORS字样的报错代表跨域问题，根据具体错误调整对应配置即可

内容的提问来源于stack exchange，提问作者BAHA