Failed to load resource: net::ERR_CONNECTION_REFUSED http://127.0.0.1:3000/api/categories-CodePudding

I have my node.js backend running on port 5000 and my react client running on port 3000 (http://localhost:3000). The react client has the following url in the package.json proxy: http://localhost:5000 (backend url)

I used to make api requests from the client to the backend using axios at baseurl http://localhost:3000. The proxy performed its function and there were no problems with cors.

On the backend in app.js there is the following block of code:

app.use(function (req, res, next) {
  // Website you wish to allow to connect
  res.setHeader('Access-Control-Allow-Origin', 'http://localhost:3000')

  // Request methods you wish to allow
  res.setHeader('Access-Control-Allow-Methods', 'GET, POST, OPTIONS, PUT, PATCH, DELETE')

  // Request headers you wish to allow
  res.setHeader('Access-Control-Allow-Headers', 'X-Requested-With,content-type, Authorization')

  // Set to true if you need the website to include cookies in the requests sent
  // to the API (e.g. in case you use sessions)
  res.setHeader('Access-Control-Allow-Credentials', true)

  // Pass to next layer of middleware
  next()
})

Now I decided to move my site to a VPS server. I installed nginx there and this is what I wrote in /etc/nginx/sites-available/default in the location block.

location / {
                # First attempt to serve request as file, then
                # as directory, then fall back to displaying a 404.
                proxy_pass http://localhost:3000; #whatever port your app runs on
                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;
        }

With pm2 I ran my node.js backend and react client. They are running on the same ports as before.

My server is now available at my-site.com for example. When you go to the url it opens my client. So far everything is going as it should. However, when my client accesses my backend I get an error like this: GET http://127.0.0.1:3000/api/categories net::ERR_CONNECTION_REFUSED

Can you tell me how to fix it and make my api requests to be executed?

CodePudding user response：

Your React proxy is probably not running on the VPS. Either way, it would be better to use Nginx instead, as the React proxy is designed for development use only.

You can configure Nginx to forward requests for the /api path to the Node.js app the same way as you configured the root path for the React app.

location /api {
    proxy_pass http://localhost:5000;
    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;
}