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 munication 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;
  }

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 munication 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;
  }

• javascript
• java
• reactjs
• rest
• axios

• You can't set "Access-Control-Allow-Origin" on a client. This is response header that should be provided by a server. Check if your server sends this header if you are going to use your API w/o proxy in production. – Yury Tarabanko Commented Jul 21, 2020 at 17:37

2 Answers 2

Since posting, I learned that you can't use a proxy in a production version of React. "proxy:" in package.json only has an effect in development - not in production. Thanks for everyone's help.

Source: https://create-react-app.dev/docs/proxying-api-requests-in-development/

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 puter(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