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

Question

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

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

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

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

我尝试在 package.json 'http://192.168.XX.XXX:3010' 中从 React 前端添加代理，但都无济于事，它仍然不起作用。

我也用了postman，也是同样的错误。我的应用程序也使用 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;

Answer 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,
     })
   );

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 deployment

deployment

api

node.js

reactjs

axios