G
G
GNG9992021-09-24 17:38:15
Nginx
GNG999, 2021-09-24 17:38:15

How to make backend requests in react app?

There is a remote server ubuntu nginx
config sitest-available

upstream remoteApplicationServer {
    server 10.10.10.10;
}

upstream remoteAPIServer {
    server 20.20.20.20;
    server 20.20.20.21;
    server 20.20.20.22;
    server 20.20.20.23;
}


server {
    listen 80;
    server_name www.bio-global.ru bio-global.ru;
    root /var/www/html;
    index index.html;

              location / {
            proxy_set_header   Host             $host:$server_port;
            proxy_set_header   X-Real-IP        $remote_addr;
            proxy_set_header   X-Forwarded-For  $proxy_add_x_forwarded_for;
            proxy_pass http://localhost:3000/;
        } // другое next js приложение

        location /remote { 
            alias /var/www/bio-global.ru/admn;
            try_files $uri $uri/ =404; //react js приложение где не работают запросы
        }



        location /rs {
            proxy_pass https://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;
            proxy_redirect http:// https://;  //бэкэнд приложение node js
        }
}

there is a backend application, it is on port 5000 - it works, I checked it through curl on the server itself
, now I deployed the react spa application
package json
{
  "name": "client",
  "version": "0.1.0",
  "private": true,
  "homepage": "http://bio-global.ru/remote",
  "dependencies": {
    "@testing-library/jest-dom": "^5.11.9",
    "@testing-library/react": "^11.2.3",
    "@testing-library/user-event": "^12.6.2",
    "axios": "^0.21.1",
    "bootstrap": "^4.6.0",
    "bootstrap-icons": "^1.5.0",
    "jwt-decode": "^3.1.2",
    "mobx": "^6.0.5",
    "mobx-react-lite": "^3.1.7",
    "react": "^17.0.1",
    "react-bootstrap": "^1.4.3",
    "react-dom": "^17.0.1",
    "react-router-dom": "^5.2.0",
    "react-scripts": "4.0.1",
    "web-vitals": "^0.2.4"
  },
  "scripts": {
    "start": "react-scripts start",
    "build": "react-scripts build",
    "test": "react-scripts test",
    "eject": "react-scripts eject"
  },
  "eslintConfig": {
    "extends": [
      "react-app",
      "react-app/jest"
    ]
  },
  "browserslist": {
    "production": [
      ">0.2%",
      "not dead",
      "not op_mini all"
    ],
    "development": [
      "last 1 chrome version",
      "last 1 firefox version",
      "last 1 safari version"
    ]
  }
}

app.js
return (
        <BrowserRouter basename={process.env.PUBLIC_URL}>
            <NavBar />
            <AppRouter />
        </BrowserRouter>
    );
});

The fact is that requests received / sent (I use axios) do not work at all, failed everywhere, although the url is the correct
example of the error
localhost: 5000 / api / user / auth - failed ERR CONNECTION REFUSED
Please help

Answer the question

In order to leave comments, you need to log in

Didn't find what you were looking for?

Ask your question

Ask a Question

731 491 924 answers to any question