React API calls work in development and fail in production build

Viewed 2158

I'm trying to deploy a React project with a Spring Boot/Hibernate Restful CRUD API. I'm running the SQL database locally and running my React app in development mode (localhost:3000) allows for successful communication with my API.

However, when I built my app for production (localhost:5000), the API is unsuccessful. The API response is an error code 304. My best guess is that something is getting mixed up with the changing ports? It works as intended in development on port :3000 and fails when built on port :5000.

I've never deployed a React app before so thanks for any help!


API call

   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;
  }
2 Answers

Ben, first of all, I think that you need to sure that your backend really running on 5000 and after that you need to try a simple request using a tool like postman, advanced REST api or insomnia.

perhaps, you need to release the 5000 port on your computer(firewall).

Other ideia is, you need to specify some flags to use other request ip/port, in my case, I use angular and I needed some flags:

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