net::ERR_CONNECTION_TIMED_OUT 用于部署后从 REACT.js 前端到 node.js 后端的 POST 请求答案

【问题标题】：net::ERR_CONNECTION_TIMED_OUT for a POST request from REACT.js front-end to node.js back-end after deploymentnet::ERR_CONNECTION_TIMED_OUT 用于部署后从 REACT.js 前端到 node.js 后端的 POST 请求
【发布时间】：2021-12-14 02:23:08
【问题描述】：

在部署到本地服务器和本地网络之前，我一直在尝试解决我的应用程序的问题。 http://localhost:3010 和 http://192.168.XX.XXX 我的 Node.js 后端连接到我的反应前端并且工作正常。也就是说，POST、GET 请求等。一切都很好，没有问题。

然后我在外部部署了我的应用程序，其中 192.168.xx（在 Intranet 网络中运行良好）通过域 (app.testSetup.de) 指向外部网络。但是部署后，react 前端加载正常，但随后向节点后端 (http://192.168.XX.XXX/auth/login) 发出请求，不断给出错误 net::ERR_CONNECTION_TIMED_OUT。所以它基本上永远不会完全提出请求。

图片截图如图所示。我已将我的 node_env 设置为仍在开发中，而外部链接只是指向内部 Intranet 以从外部（互联网）访问它

我尝试将所有请求 url 从 'http://localhost:3010/login' 更改为应用程序的绝对路径 'http://192.168.XX.XXX:3010/login' 。

我尝试在 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;

【问题讨论】：

标签： node.js reactjs api deployment axios

【解决方案1】：

问题出在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 解决了问题。请注意，如果您以这种方式设置环境，请确保也有代理设置。例如在setupProxy.js 中添加proxy middleware。当您安装和启动项目时，此文件中的代理设置会自动链接

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

【讨论】：