Не удалось загрузить ресурс: net::ERR_CONNECTION_REFUSED http://127.0.0.1:3000/api/categories

У меня есть серверная часть node.js, работающая на порту 5000, и мой реагирующий клиент, работающий на порту 3000 (http://localhost:3000). Реагирующий клиент имеет следующий URL-адрес в прокси-сервере package.json: http://localhost:5000 (внутренний URL-адрес)

Раньше я делал запросы API от клиента к бэкенду, используя axios на baseurl http://localhost:3000. Прокси выполнял свою функцию и проблем с корсом не было.

На бэкенде в app.js есть следующий блок кода:

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()
})

Теперь я решил перенести свой сайт на сервер VPS. Я установил туда nginx и вот что я написал в /etc/nginx/sites-available/default в блоке местоположения.

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;
        }

С pm2 я запустил свой бэкэнд node.js и реагирующий клиент. Они работают на тех же портах, что и раньше.

Например, мой сервер теперь доступен на my-site.com. Когда вы переходите по URL-адресу, он открывает мой клиент. Пока все идет как надо. Однако, когда мой клиент обращается к моему бэкенду, я получаю такую ​​ошибку: GET http://127.0.0.1:3000/api/categories net::ERR_CONNECTION_REFUSED

Можете ли вы сказать мне, как это исправить и сделать так, чтобы мои запросы API выполнялись?

Стоит ли изучать PHP в 2023-2024 годах?
Стоит ли изучать PHP в 2023-2024 годах?
Привет всем, сегодня я хочу высказать свои соображения по поводу вопроса, который я уже много раз получал в своем сообществе: "Стоит ли изучать PHP в...
Поведение ключевого слова "this" в стрелочной функции в сравнении с нормальной функцией
Поведение ключевого слова "this" в стрелочной функции в сравнении с нормальной функцией
В JavaScript одним из самых запутанных понятий является поведение ключевого слова "this" в стрелочной и обычной функциях.
Приемы CSS-макетирования - floats и Flexbox
Приемы CSS-макетирования - floats и Flexbox
Здравствуйте, друзья-студенты! Готовы совершенствовать свои навыки веб-дизайна? Сегодня в нашем путешествии мы рассмотрим приемы CSS-верстки - в...
Тестирование функциональных ngrx-эффектов в Angular 16 с помощью Jest
В системе управления состояниями ngrx, совместимой с Angular 16, появились функциональные эффекты. Это здорово и делает код определенно легче для...
Концепция локализации и ее применение в приложениях React ⚡️
Концепция локализации и ее применение в приложениях React ⚡️
Локализация - это процесс адаптации приложения к различным языкам и культурным требованиям. Это позволяет пользователям получить опыт, соответствующий...
Пользовательский скаляр GraphQL
Пользовательский скаляр GraphQL
Листовые узлы системы типов GraphQL называются скалярами. Достигнув скалярного типа, невозможно спуститься дальше по иерархии типов. Скалярный тип...
0
0
40
1
Перейти к ответу Данный вопрос помечен как решенный

Ответы 1

Ответ принят как подходящий

Ваш прокси-сервер React, вероятно, не работает на VPS. В любом случае, вместо этого было бы лучше использовать Nginx, поскольку прокси-сервер React предназначен только для использования в разработке.

Вы можете настроить Nginx для пересылки запросов пути /api к приложению Node.js так же, как вы настроили корневой путь для приложения React.

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;
}

Другие вопросы по теме