React App 在本地主机上工作但不在 Netlify 部署上工作，因为 API 调用不同答案

【问题标题】：React App working on localhost but not working on Netlify deploy because the API call is differentReact App 在本地主机上工作但不在 Netlify 部署上工作，因为 API 调用不同
【发布时间】：2023-02-09 04:18:16
【问题描述】：

我正在使用 freetogame API 开发一个 React 应用程序，它在本地主机上完美运行，但我将它部署在 Netlify 上，但它不起作用，因为它正在对不同的地址进行 API 调用。这是本地主机上的 API 调用：localhost API Call

这是已部署站点上的 API 调用：Deployed Site API Call

正如您在部署的站点 API 调用中看到的那样，请求 URL 完全不同，并且 API 调用中有一个 /undefined/ 部分。我不知道是什么导致了这个问题。这是该项目的 Github 链接：Project Github Link

请帮我找到解决方案。提前致谢

编辑：我做了更多研究，认为问题可能是由 axios 调用引起的。我的 axios 调用中有 baseURL、标头和参数，但我没有在 Netlify 部署中定义它们。这是我的 axios 调用：Axios Call 这是我的 package.json 文件：package.json .我如何在 netlify 中定义它们？

【问题讨论】：

标签： reactjs axios netlify

【解决方案1】：

您是否已将环境变量添加到 Netlify？

api_key = process.env.REACT_APP_API_KEY  
api_host = process.env.REACT_APP_API_HOST
api_base_url = process.env.REACT_APP_API_BASE_URL

如果您不在 Netlify 项目中声明上述变量，它将不知道要插入什么值，这就是它们当前未定义的原因。访问此链接了解更多信息：Netlify Environment Variables

【讨论】：

我试过了，但不幸的是它仍然是一样的。

【解决方案2】：

我找到了一个解决方案并想将它发布在这里，以便它可以帮助其他人。我尝试手动将我的构建文件部署到 Netlify，该站点现在可以正常工作。

【讨论】：

【解决方案3】：

就我而言，问题是 Netlify 无法访问我的 .env 密钥。为了克服它，我在 Netlify 上打开了我的应用程序仪表板，然后单击：1) 站点设置 2) 环境变量 3) 添加变量

对于 key，只需输入 .env 文件中的变量名即可。对于 values 输入您的变量值。无需输入""

scopes 可以保持默认（All scopes 和 Same value for all deploy contexts）

【讨论】：