Nginx Question posted in
The official documentation can be found here.

React build doesn't work with axios proxy – Nginx

My problem is:

I’ve build a MERN stack app. I have nodejs app connected to mongodb atlas deployed on VM in GCP. Everything works great and this VM serves the request on http://35.240.91.193:5000. You may see it going to http://35.240.91.193:5000/api/profile.

My client app is build with React and creates connection to nodejs app through the axios calls.
It works through the "proxy" properties set in package.json as {"proxy": "http://35.240.91.193:5000"}. When I run client app in dev mode (npm start) everything works great, but when I run npm run build and deploy the build package with nginx (locally or remotely) connection requests do not work.
Through the network tab in dev tools I see the request are not going through the proxy but as "http://client_host/api/profile" but it should be "http://35.240.91.193:5000/api/profile".

Here is the client code
https://github.com/GeorgeFalkovich/csc_fe

Tags:

2

Answers


  1. Chosen as BEST ANSWER
    0

    The issue was resolved by adding

    if(process.env.NODE_ENV !== "development") {
    axios.defaults.baseURL = 'BASE URL TO YOUR API';
}

    to my client app before any axios request was called

    and adding middleware(npm install) cors to my nodejs server file

    app.use(cors());

  2. 0

    The proxy in the package.json only works in dev mode, in production it is assumed that the front end and the api server live on the same server, you can fix this by adding a base URL via axios like this

    if(process.env.NODE_ENV !== "development") {
    axios.defaults.baseURL = 'BASE URL TO YOUR API';
}

    Put this code before any axios requests are made.

    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search