Weatherbit数据异常、参数配置及Pixabay接口调用相关问题咨询

问题描述 #

1. Weatherbit数据返回异常 #

运行如下命令启动项目后：

npm run build-prod
npm run build-dev
npm start

在页面输入任意城市，Weatherbit返回的数据显示为undefined，仅在VS开发环境下运行可正常显示，暂未定位到问题原因。
对应问题截图：

2. geoNames接口调用报错 #

调用geoNames接口，传入lat、lng参数拉取对应数据时触发报错。
对应报错截图：

3. Pixabay图片加载失败 #

调用Pixabay API拉取图片资源时，图片无法在页面正常显示。
对应报错截图：

项目代码地址 #

完整项目代码仓库：https://github.com/BasmaElsisy1/Finallll.git #

排查修复方案 #

针对Weatherbit数据undefined问题 #

• 优先核对生产环境的环境变量注入情况，确认Weatherbit的API密钥、接口地址等配置项在构建时是否成功传入，开发环境的本地env文件默认不会自动同步到生产构建配置。
• 检查跨域规则配置：开发环境的devServer代理规则仅在本地开发时生效，生产环境如果没有配置对应的服务端代理或者接口跨域白名单，会导致接口请求被拦截，返回空数据。
• 打开生产页面的控制台Network面板，查看Weatherbit接口的请求状态、返回体内容，确认是否存在401鉴权失败、404地址错误、CORS跨域等报错。

针对geoNames接口报错问题 #

• 先打印传入接口的lat、lng参数值，确认是否存在空值、格式错误、经纬度取值超出合法范围的问题，参数异常是这类接口报错的最高发原因。
• 核对geoNames接口的官方调用规则，确认是否漏传username等必填参数，生产环境是否存在参数配置丢失的情况。

针对Pixabay图片无法显示问题 #

• 复制接口返回的图片链接直接在浏览器访问，确认链接本身是否可正常打开，排查是否Pixabay的防盗链规则拦截了你生产域名的请求。
• 检查图片地址的拼接逻辑，确认是否存在生产环境域名拼接错误、参数缺失的问题。

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