Unable to make API Calls to backend(Node js) from frontend(reactjs)

Hi there,

The issue you’re facing seems to be related to the way you’ve set up the Nginx reverse proxy and how you’re making requests from your React frontend.

Let’s diagnose and fix the issue step-by-step:

1. Nginx Configuration:

   • In your location /app2 block, you’re proxying to http://localhost:4000. This means that any request that comes to https://yourdomain.com/app2/* will be proxied to http://localhost:4000/*.

   • You should modify the proxy pass so it strips the /app2 prefix:

   location /app2/ {
       proxy_pass http://localhost:4000/;
       ...
   }
   

   • Notice the trailing slashes in both the location directive and the proxy_pass directive; they’re important.

2. React Frontend Axios Call:

   • Instead of making a request directly to https://localhost:4000/app2/sparters, you should make the request to /app2/sparters.

   • Example:

     axios.get('/app2/sparters').then(res => console.log(res.data))
     

3. Ensure Nginx Configuration is Reloaded: After you make changes to the Nginx configuration, ensure you reload (or restart) Nginx for the changes to take effect:

   sudo nginx -s reload
   

4. CORS Configuration: Make sure your Node.js backend (running on localhost:4000) has CORS headers configured to allow requests from your frontend (especially if they’re on different origins or if you ever move to a non-localhost setup). You can use the cors middleware for Express.js if you’re using that framework.

5. Use HTTPS: Your Axios request is using https, but your Nginx configuration is proxying to an http backend. Ensure that:

   • Your Node.js app and Nginx are properly set up to handle HTTPS if they need to.
   • If you’re using self-signed certificates for localhost, ensure you handle certificate warnings in the browser, or consider using tools like mkcert to generate trusted localhost certificates.

6. Check Browser Developer Console: Always check your browser’s developer console for any additional details or errors that might provide more information about what’s going wrong.

7. Nginx Logs: Look into the Nginx error and access logs (/var/log/nginx/error.log and /var/log/nginx/access.log). These logs might have more information about why a request is being returned with a 404 status.

On another note, serving a React application as a static site through Nginx is a common setup and is actually simpler than proxying to a service. Running react as a Node.js service is more commonly done for development environments.

1. React Build: Start by building your React application. This will generate a build directory that contains static files suitable for serving with Nginx.

   Navigate to your React project directory and run:

   npm run build
   

2. Move the Build to Nginx’s Serving Directory: After the build completes, move or copy the build directory contents to the location where Nginx expects static files, typically /var/www/html or another directory of your choice:

   sudo cp -r build/* /var/www/html/
   

3. Nginx Configuration: Update the Nginx configuration to serve the React static files and to proxy requests to your backend service. Edit the configuration file located at /etc/nginx/sites-available/default:

server {
    listen 80;

    root /var/www/html; # Path to your React app's build directory
    index index.html;

    server_name your_domain_or_ip;

    location / {
        try_files $uri $uri/ =404;
    }

    location /app2/ {
        proxy_pass http://localhost:4000/;
        proxy_http_version 1.1;
        proxy_set_header Upgrade $http_upgrade;
        proxy_set_header Connection 'upgrade';
        proxy_set_header Host $host;
        proxy_cache_bypass $http_upgrade;
    }
}

Make sure to adjust your_domain_or_ip to your server’s domain or IP address.

4. Reload Nginx: After you’ve edited the configuration, reload Nginx to pick up the changes:

sudo nginx -s reload

Best,

Bobby