Axios的POST请求：网络错误

Question

我正在使用NodeJS作为后端，ReactJS作为前端。

我的问题在于请求Axios网络。所有的Get请求都可以工作，但是Post请求无法工作。我只得到了这个错误消息："network error"。

我创建了一个简单的Web服务来展示我的问题：

//Serveur code

helloWs : (request:Express.Request, response:Express.Response) => {
        try {
            response.send('hello WS !')
        } catch (error) {
            console.error(error)
            response.send('error' + error + 'status : ' + error.response.status)     
            response.end()    
        }
    }

//Here I create my root 
router.post('/helloWs',DocumentController.helloWs)

//This is my front

 axios.post('http://localhost:9000/1/documents/helloWs', { 
 }) .catch(function (error) {
                if (error.response) {
                    console.log('Error data : ', error.response.data);
                    console.log('Error status : ', error.response.status);
                    console.log('Error headers : ', error.response.headers);
                } else if (error.request) {
                    console.log('Error request : ', error.request);
                } else {
                    console.log('Error message : ', error.message);
                }
                console.log(error.config);
            })

在导航控制台中，我刚刚遇到了 "网络错误"，我的 Web 服务是以 OPTION 而不是 "POST" 的形式存在。

我正在尝试在 axios 中添加头文件，但它不起作用。我特别说明已经使用 Postman 进行了测试，一切正常。你有什么想法吗？ 谢谢

- Anaïs Saez

---

可能是CORS问题。您的服务器是否接受跨域请求？ - Faizuddin Mohammed

我也遇到了同样的问题，但有趣的是，在浏览器网络选项卡中能够看到响应。在响应中间，axios将其覆盖或更改为“网络错误”，不确定原因，并且在浏览器中看到CORS错误。通过在服务器上设置cors，问题得到解决。 - Naren

Answer 1

这很可能是由于跨域引起的错误。浏览器在实际请求之前会发送 OPTION 请求，以检查您的域是否有权访问该资源。

由于 Postman 不进行预检请求，因此您会得到响应。

尝试在定义路由之前在服务器端代码中添加此中间件。

app.use(function(req, res, next) {
  res.header("Access-Control-Allow-Origin", "*");
  res.setHeader('Access-Control-Allow-Methods', 'GET, POST, OPTIONS, PUT, PATCH, DELETE');
  res.header("Access-Control-Allow-Headers", "Origin, X-Requested-With, Content-Type, Accept");
  next();
});

- Karim

Answer 2

我发现我的设置出现了这个错误。由于某种原因，在POST请求前添加http://（这是本地主机上的开发服务器）再次启用了网络。

我还没有深入研究axios文档，但我猜测有些代码会自动在GET请求前添加http://，但对于POST方法则无法实现？这是解释这种奇怪行为的一种可能性。

- cmshnrblu

Answer 3

如果您在 Android 模拟器上运行 React Native 应用程序，则可以尝试以下方法：

在 PowerShell 或命令提示符中运行以下命令： adb reverse tcp:9000 tcp:9000

这将使您的 Android 模拟器能够访问本地主机的 9000 端口。

- Henrik Larsen

Answer 4

我曾经遇到过一个类似的错误，几乎无法调试。最终发现是我的后端不是https，而我的前端是https。通过将我的后端改为https，问题得以解决，我再也没有遇到这个错误了！

- Julian George