mongodb React应用程序中的HTTP请求不通过网络连接工作,而是在本地主机上工作

uemypmqf  于 2022-12-12  发布在  Go
关注(0)|答案(8)|浏览(389)

我一直在构建一个React应用程序有一段时间了,并一直在测试多个设备的响应能力。
React应用本身在我的本地机器上运行得非常好。当通过网络访问React示例时,所有HTTP请求都失败,因为它想将HTTP请求发送到端口3000而不是我的Node.js服务器运行的端口5000。
第一个

React应用程序中的请求示例

// Submit application to database
  const storeAndSubmit = (formData) => {
    try {
      // eslint-disable-next-line
      const res = axios({
        method: 'post',
        headers: {
          'Content-Type': 'application/json',
        },
        url: 'http://localhost:5000/api/applications',
        data: formData,
      });
      dispatch({
        type: APPLICATION_SUCCESS,
        payload: formData.pageNumber,
      });
    } catch (err) {
      dispatch({
        type: APPLICATION_FAIL,
      });
    }
  };

因为我不知道React在运行我的启动脚本时会选择什么IP地址,所以我不能将IP地址硬编码到请求中。在启动脚本运行后,是否有一个可以访问的React环境变量包含当前的本地网络IP地址?如果有,我可以在HTTP请求中使用它,我认为这可能会起作用。

网络上的错误示例

xhr.js:210          POST http://192.168.1.122:3000/api/applications 404 (Not Found)
63lcw9qa

63lcw9qa1#

您遇到了网络问题,让我们详细讨论一下。
在开发计算机上运行两个进程:

  • 一个Node.js HTTP服务器,用于提供在localhost:3000上加载React应用程序的HTML文件。
  • 一个Node.js HTTP服务器,运行localhost:5000上数据库的控制器/驱动程序。

那么,当您从网络中的其他设备请求Web应用程序时会发生什么情况呢?
设备将向http://192.168.1.122:3000发出HTTP请求,AppServerProcess将处理该请求,并使用HTML内容和相关脚本和资源进行响应,这些内容和资源将由浏览器加载。(web应用)将具有x1E0 F1 x为x1M3 N1 x的获取代码,设备将其解析为自身,在那里它将找不到任何东西。
现在,运行这两个进程(DbServerProcess和AppServerProcess)的计算机在本地网络上至少有一个IP地址,即192.168.1.122。这意味着如果DbServerProcess在localhost:5000上运行,它也应该在192.168.1.122:5000上可用,因此在提取时应该硬编码的URI是http://192.168.1.122:5000/api/applications
请注意,这在本地工作时也会起作用,因为IP地址将解析为自身。
还要注意,如果运行两个进程的计算机都配置了DHCP,则此IP地址可能会根据该配置而更改,您似乎对正在发生的事情有误解,因为不是React选择该配置,甚至也不是AppServerProcess;这是一个操作系统,它至少有一个网络接口,该接口有一个由路由器上运行的DHCP服务器分配的本地IP地址。如果你希望这是静态的,那么这是一个操作系统配置(在Windows,macOS和Linux上都很简单)。
查找“在{operating_system_name}上设置静态IP地址"。

chy5wohz

chy5wohz2#

您可以做的一件事是通过将以下内容添加到package.json文件来代理您的请求:"proxy": "http://localhost:5000",
现在,在获取或Axios调用中,您可以使用以下URL '/api/applications'代替'http://localhost:5000/api/applications'

46qrfjad

46qrfjad3#

我将假设如果您在启动应用程序时指定React端口,您将能够解决这个问题,如果我错了,请纠正我。
您可以在Linux上执行以下操作:

PORT=3006 react-scripts start

或者在Windows上:

set PORT=3006 && react-scripts start

检查this answer

wbrvyc0a

wbrvyc0a4#

查看后端服务器的cors-npm,因为这可能是不连接的原因。
稍后您可以使用Cloudflare Tunnel作为您的web服务器,并使用该地址在react应用程序中访问您的web服务器。

vfwfrxfs

vfwfrxfs5#

首先,通过Postman测试后端API是否正常工作。
http://192.168.1.122:5000/应该对你的情况起作用。

在它之后

在检查Postman的后端是否正常工作后,在您的前端尝试此代码。

const api = axios.create({
    baseURL: "http://192.168.1.122:5000/api/",    //PLEASE CONFIRM IP.
    headers: {
        'Content-Type': 'application/json',
    },
});

const submitApi = async (formData) => api.post('/applications', formData);

const storeAndSubmit = async (formData) => {
    try {
        const {data} = await submitApi(formData);
        if(!!data) {
            dispatch({
                type: APPLICATION_SUCCESS,
                payload: formData.pageNumber,
            });
        } else {
            dispatch({
                type: APPLICATION_FAIL,
            });
        }
    } catch(e) {
        dispatch({
            type: APPLICATION_FAIL,
        });
    }
}
1u4esq0p

1u4esq0p6#

我认为你应该在你想要连接到应用程序的设备中的浏览器上检查响应。
对于404代码,可能的原因可能是设备和您的电脑使用的不是同一个Wi-Fi调制解调器。

iyfamqjs

iyfamqjs7#

您根本不应该使用网域:

url: '/api/applications',

url: 'api/applications',

前者要求从域的根目录提供api,后者要求从当前页面的路径提供api。在这两种情况下,模式、域和端口都将从当前页面的URL继承。
RFC 2396中提供了详细信息。
它允许您在任何域、任何端口上使用代码而无需更改,因为托管架构与前端应用无关。

wkftcu5l

wkftcu5l8#

创建一个 .env 文件,然后尝试以下操作:

REACT_APP_API_ENDPOINT=http://192.168.1.blablabla

您还可以执行以下操作:

"scripts" : {
   "start": "REACT_APP_API_ENDPOINT=http://localhost.whatever npm/yarn start"
   "start-production": "REACT_APP_API_ENDPOINT=http://production.whatever npm/yarn start"
}

它取自 How can I pass a custom server hostname using React?

相关问题