Блог

Я пытался решить проблему с моим приложением после развертывания, перед развертыванием на моем локальном сервере и в локальной сети. http://localhost:3010 и http://192.168.XX.XXX где мой Node.js серверная часть подключается к моему интерфейсу react и работает нормально. То есть, ОТПРАВЛЯЙТЕ, ПОЛУЧАЙТЕ запрос и т. Д. Все работает очень хорошо, проблем нет.

Затем я развернул свое приложение снаружи, где 192.168.xx (который нормально работал в сети интрасети) указывает на внешнюю сеть через домен (app.testSetup.de). Однако после развертывания интерфейс react загружается нормально, но затем выполняет запрос к серверной части узла (http://192.168.XX.XXX/auth/login) продолжает выдавать сообщение об ошибке net::ERR_CONNECTION_TIMED_OUT. Таким образом, он в основном никогда не выполняет запрос полностью.

Скриншот изображения выглядит так, как показано на рисунке. Я установил свой node_env все еще в разработке, в то время как внешняя ссылка-это просто указание на внутреннюю интрасеть для доступа к ней извне (Интернет).

Я попытался изменить все URL-адреса запросов с ‘http://localhost:3010/login» к абсолютному пути приложения «http://192.168.XX.XXX:3010/login» .

Я попытался добавить прокси из интерфейса react в package.json ‘http://192.168.XX.XXX:3010″, все безрезультатно, это все равно не работает.

Я тоже использовал почтальона, и это та же ошибка. также мое приложение использует cors(), но для него нет конфигурации. https://www.npmjs.com/package/cors#simple-usage-enable-all-cors-requests. Поэтому я разрешаю все запросы CORS.

У кого-нибудь есть предположения, в чем может быть проблема, пожалуйста ?

Пример компонента, который делает запрос POST:

 import axios from "../axiosInstance";

...
    export const login = (email, password, org) => async (dispatch) => {
      dispatch(slice.actions.loading({ loading: true }));
      localStorage.setItem("Org", org);
      setURL(org);
      setTimeout(() => {
        console.log("hi");
      }, 500);
      axios
        .post("/auth/login", { email, password })
        .then((x) => {
          dispatch(slice.actions.login(x.data));
          setSession(x.data);
        })
        .catch((e) => {
          dispatch(slice.actions.loading({ loading: false }));
          dispatch(slice.actions.setErr({ err: e }));
        });
    };
 

Конфигурация вызова Axios настраивается следующим образом:

     import axios from "axios";
    
    const axiosInstance = axios.create();
    axiosInstance.defaults.baseURL = "http://192.168.XX.XXX:3010";
    ...

export default axiosInstance;
 

Проблема заключалась в axiosInstance следующем коде:

 import axios from "axios";

//const axiosInstance = axios.create();
//COMMENTING AXIOS INSTANCE (MAINLY THE BELOW CODE LINE)
//axiosInstance.defaults.baseURL = "http://192.168.XX.XXX:3010";
 

Комментируя экземпляр axios и используя axios, проблема была решена. Примечание.Если вы настраиваете среду таким образом, убедитесь, что у вас также есть настройки прокси-сервера. Например, добавьте proxy middleware setupProxy.js . Параметр прокси-сервера в этом файле автоматически связывается при установке и запуске проекта

 const { createProxyMiddleware } = require('http-proxy-middleware');
 
 module.exports = function(app) {
   app.use(
     '/backend1',
     createProxyMiddleware({
       target: 'http://192.168.XX.XXX:3010',
       changeOrigin: true,
     })
   );