反应构建获取请求失败答案

【问题标题】：React build fetch requests failing反应构建获取请求失败
【发布时间】：2020-06-05 00:23:21
【问题描述】：

当我在dev 环境 (npm start) 中测试时，我的 react 应用程序获取请求工作正常，但在创建构建包 (npm run build) 然后运行它之后，我的所有获取请求在发出请求时都会收到失败状态到我本地托管的 API。这可能是因为我的 API 不是 https？还有其他想法吗？

谢谢

【问题讨论】：

您有关于失败请求的更多信息吗？错误代码是什么？错误是否返回任何消息？ chrome 开发工具网络选项卡中应该有一些信息
没有错误代码。它只在我第一次发出请求时说“（失败）net::ERR_CONNECTION_REFUSED ”，随后的尝试只是说（失败）
您是否尝试过使用 ngrok 之类的方式将您的 API 置于 https 后面？
请发布一个示例 fetch 以及开发人员工具的“网络”选项卡的屏幕截图，并选择 fetch。
我认为您正在使用代理作为测试环境，并且您的产品环境 url 与您的托管 url 不匹配

标签： reactjs https fetch

【解决方案1】：

仔细检查您的 .env 文件中是否有 REACT_APP_API_URL：

.env（应该是本地主机）
.env.production（这是在构建时使用的，它应该是生产 URL）

【讨论】：

如果我正在构建我的 url 是这样的：let api_url = process.env.NODE_ENV === 'production' ? /api/urls/?user=${loginData.email}` : http://localhost:8000/api/urls/?user=${loginData.email};`
您能否进行测试并告诉我们您在开发者控制台→网络选项卡上将 HTTP 请求指向何处？
puu.sh/IKKlR/1f9d53ce39.png@icaruk
您指向 localhost:8000 所以问题出在环境文件或您用来选择环境的函数上。尝试对生产 URL 进行硬编码、构建和测试。
我确实对网址进行了硬编码，但它没有用

【解决方案2】：

尝试在你的 react 应用的 package.json 中添加一个proxy 字段。一旦到位，运行构建和测试。这通常解决了 react 使用 api 可能遇到的 api 问题。

package.json: proxy: "http://localhost:8000"

React 应用中的请求：fetch('/api/urls/....')

【讨论】：