Github Pages部署React应用后OMDb API_URL功能无法运行求助

核心排查方向及解决步骤 #

• 修正API请求协议：Github Pages强制使用HTTPS，若你的API_URL采用HTTP协议，浏览器会拦截混合内容请求。将OMDb API地址从http://www.omdbapi.com/替换为https://www.omdbapi.com/。
• 验证API密钥有效性：检查代码中硬编码的OMDb密钥是否正确，若密钥过期或无效，前往OMDb官网重新申请免费密钥。
• 查看浏览器控制台错误：按下F12打开开发者工具，切换至Console标签页，查看具体错误信息（如401密钥错误、CORS拦截、404路径错误等），精准定位问题。
• 确认项目配置正确性：检查package.json中的homepage字段是否与Github Pages地址一致（你的配置"homepage": "https://perdidoencoding.github.io/first_react_app/"是正确的），避免路径问题导致API请求异常。

实操示例 #

1. 找到项目中定义API_URL的文件，修改协议：

const API_URL = 'https://www.omdbapi.com/?apikey=你的密钥&s=';

2. 重新部署项目：

npm run deploy

3. 刷新Github Pages页面，测试API功能，同时通过控制台确认请求状态。

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