React API 调用在开发中工作，在生产构建中失败

Posted 2023-02-22

【中文标题】React API 调用在开发中工作，在生产构建中失败

【英文标题】：React API calls work in development and fail in production build

【发布时间】：2020-11-11 03:42:18

【问题描述】：

我正在尝试使用 Spring Boot/Hibernate Restful CRUD API 部署 React 项目。我在本地运行 SQL 数据库并在开发模式下运行我的 React 应用程序 (localhost:3000) 允许与我的 API 成功通信。

但是，当我构建我的生产应用程序 (localhost:5000) 时，API 不成功。 API 响应是错误代码 304。我最好的猜测是端口的变化与某些东西混淆了？它在端口：3000 上按预期工作，在端口：5000 上构建时失败。

我以前从未部署过 React 应用程序，所以感谢您的帮助！

---

API 调用

   const apiCall = () => 
    fileService
      .getUsers()
      .then((response) => 
        setUsers(response.data); //Incorrectly returns a 304 error
      )
      .catch(function (error) 
        console.log(error);
      );
  ;

getUsers()

    getUsers() 
        return service.getRestClient().get("/api/getAllUsers");
    

getRestClient()

getRestClient() 
    if (!this.serviceInstance) 
      this.serviceInstance = axios.create(
        baseURL: "http://localhost:5000/",
        timeout: 10000,
        headers: 
          "Content-Type": "application/json",
          "Access-Control-Allow-Origin": "*",
          "Access-Control-Allow-Methods": "GET, POST, PUT, DELETE",
          "Access-Control-Allow-Headers": "Content-Type",
          "Access-Control-Allow-Credentials": true,
        ,
      );
    
    return this.serviceInstance;
  

【问题讨论】：

您不能在客户端上设置"Access-Control-Allow-Origin"。这是应该由服务器提供的 response 标头。如果您要在生产中使用不带代理的 API，请检查您的服务器是否发送此标头。

【参考方案1】：

自从发布以来，我了解到您不能在 React 的生产版本中使用代理。 package.json 中的"proxy:" 仅在开发中有效 - 在生产中无效。感谢大家的帮助。

来源：https://create-react-app.dev/docs/proxying-api-requests-in-development/

【讨论】：

那么问题的解决方法是什么。我有同样的问题。

【参考方案2】：

Ben，首先，我认为您需要确保您的后端确实在 5000 上运行，然后您需要使用 postman、高级 REST api 或 insomnia 等工具尝试一个简单的请求。

也许，您需要释放您计算机（防火墙）上的 5000 端口。

其他想法是，您需要指定一些标志来使用其他请求 ip/port，在我的情况下，我使用 angular，我需要一些标志：

ng serve --host 0.0.0.0 --disable-host-check