У меня проблема с использованием http-proxy-middleware

В моем бэкэнде работают два сервера, поэтому я должен использовать https://www.npmjs.com/package/http-proxy-middleware#shorthand, но я столкнулся с некоторыми проблемами.

Это мой код во внешнем интерфейсе, который работает на localhost: 3000

axios("/api2/login",data)
    .then((res) => {
});

Это мой код в бэкэнде, который работает на localhost: 5001

const { createProxyMiddleware } = require('http-proxy-middleware');

app.use(createProxyMiddleware('/api2', {target: 'http://localhost:5001', changeOrigin: true}))

app.post("/login", (req, res, next) => {
    res.send("Logged In");
});

Этот код не работает, показывая эту ошибку в консоли браузера.

GET http://localhost:3000/api2/login 404 (Not Found)
Uncaught (in promise) Error: Request failed with status code 404
    at createError (createError.js:16)
    at settle (settle.js:17)
    at XMLHttpRequest.handleLoad (xhr.js:61)

Я не могу понять, в чем я ошибаюсь.


reactjs node.js express http-proxy-middleware
person Abhinav    schedule 12.01.2021    source источник
comment
Можете ли вы поделиться кодом вашего другого порта 3000 сервера?   -  person Melchia    schedule 12.01.2021
comment
Вы имеете в виду код моего другого сервера, работающего на порту 5000?   -  person Abhinav    schedule 12.01.2021

Ответы (3)


arrow_upward
0
arrow_downward

Похоже, он попадает в localhost:3000 вместо localhost:5001, откуда запущен ваш сервер.

axios("http://localhost:5001/api2/login",data)
    .then((res) => {
});

Вы также можете установить baseURL в axios. HTTP-запрос на получение с Axios отправляется с IP-адресом локального хоста в начале URL-адреса

person Andrew Halpern    schedule 12.01.2021
comment
Это то, что я делал до использования этого пакета, но я хочу развернуть этот проект, поэтому я хочу использовать прокси-сервер, иначе он не будет работать. - person Abhinav; 12.01.2021

arrow_upward
0
arrow_downward

Если я правильно понимаю, ваш сервер прослушивает порт 5001. Итак, вам нужно проксировать ваши запросы с 3000 на 5001. Вы можете сделать это в приложении реакции, установив значение прокси в package.json:

 "proxy": "http://localhost:5001",

Для получения дополнительной информации по этой теме просмотрите документы.

Отредактируйте конфигурацию, описанную в разделе комментариев

Сначала в package.json:

 "proxy": "http://localhost:5002",

Создайте новый сервер (прокси-сервер), который будет прослушивать порт 5002:

const express = require('express');
const { createProxyMiddleware } = require('http-proxy-middleware'); 
const app = express(); 

// redirection for first server 5000
app.use('/api1', createProxyMiddleware({ target: 'http://localhost:5000', changeOrigin: true })); 

// redirection for second server 5001
app.use('/api2', createProxyMiddleware({ target: 'http://localhost:5001', changeOrigin: true })); 

app.listen(5002);

Для других серверов (5000 и 5001) вам не нужно перенаправлять запросы. Просто убедитесь, что они прослушивают правильные порты (5000 и 5001), например:

const express = require('express');
const app = express(); 

app.post("/api2/login", (req, res, next) => {
    res.send("Logged In");
});

app.listen(5001);
person Melchia    schedule 12.01.2021
comment
Но у меня есть два сервера, один на 5000, а другой на 5001, поэтому я использую этот пакет. - person Abhinav; 12.01.2021
comment
Что ж, вам нужно выбрать хотя бы один сервер, а затем снова проксировать запросы на другой сервер. Или другое элегантное решение: вы создаете другой сервер, который только запрашивает прокси (например, через порт 5002), тогда этот сервер будет проксировать запросы на два других 5000 и 5001. - person Melchia; 12.01.2021
comment
Проблема, с которой вы столкнулись выше, вызвана не конфигурацией бэкэнда, а тем, что ваши фронтальные запросы даже не доходят до одного сервера! - person Melchia; 12.01.2021
comment
Если возможно, не могли бы вы предоставить пример ссылки для того же - person Abhinav; 12.01.2021
comment
Я отредактирую ответ, для минимального решения - person Melchia; 12.01.2021
comment
Внесены указанные выше изменения, но ошибка сохраняется :-( - person Abhinav; 12.01.2021

arrow_upward
0
arrow_downward

Я выполнил шаги, упомянутые в этом сообщении вместе с некоторыми изменениями,

Я изменил свой код запроса Axios на:

axios({
    method: "POST",
    data: user,
    withCredentials: true,
    url: "/api2/login",
}).then((res) => {})

В противном случае прокси-сервер обрабатывал его как запрос GET.

Во-вторых, я изменил код конечной точки прокси на прокси-сервере как:

app.use('/api2', createProxyMiddleware({ 
    target: 'http://localhost:5001', 
    changeOrigin: true,
    pathRewrite: {
        [`^/api2`]: '',
    },
}));

Дополнительную информацию об изменении конечной точки прокси-сервера можно найти здесь .

person Abhinav    schedule 12.01.2021