@GNG999

Как делать запросы на бэкэкнд в приложении react?

Есть удаленный сервер ubuntu nginx
конфиг 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
        }
}

есть бэкэнд приложение , оно на порту 5000 - оно работает , проверял через curl на самом сервере
теперь я развернул react spa приложение
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>
    );
});

Дело в том что запросы получаемые/отправляемые (использую axios) вообще не работают ,везде выходит failed, хотя url правильный
пример ошибки
localhost:5000/api/user/auth - failed ERR CONNECTION REFUSED
Помогите плиз
  • Вопрос задан
  • 126 просмотров
Пригласить эксперта
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Войти через центр авторизации
Похожие вопросы