发布请求 Axios : 网络错误

Posted 2023-03-07

【中文标题】发布请求 Axios : 网络错误

【英文标题】：Post request Axios : Network error

【发布时间】：2018-08-14 10:00:51

【问题描述】：

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

我在请求 Axios 网络时遇到问题。我所有的获取请求工作。但是发布请求不起作用。我只有这个错误“网络错误”

我创建了一个简单的网络服务来向您展示我的问题：

//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);
            )

在导航器控制台中，我只是 network error ，我的网络服务处于 OPTION 而不是“POST”中

我正在尝试在 axios 中添加标题，但它不起作用。我指定我用邮递员测试过，没关系。 你有想法吗 ？ 谢谢

【问题讨论】：

这可能是 CORS 问题。您的服务器是否接受跨源请求？

我也遇到了同样的问题，但这里有趣的部分是，能够在浏览器网络选项卡中看到响应，在中间响应中，被覆盖或更改为 Network error axios，不知道为什么，并且还在浏览器中看到了 CORS 错误。通过在服务器的 cors 中设置，它得到了解决。

【参考方案1】：

如果您在 android 模拟器上运行您的 react-native 应用程序，这可能会起作用：

在 powershell 或 cmd 中运行： adb 反向 tcp:9000 tcp:9000

这将使您的 android 模拟器到达 localhost 的 9000 端口。

【参考方案2】：

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

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

【参考方案3】：

这很可能是与cors相关的错误，OPTION请求是浏览器在实际请求之前发出的，以检查您的域是否有权访问资源。

邮递员不执行预检请求，这就是您收到响应的原因

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

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();
);

【参考方案4】：

我遇到了一个几乎无法调试的类似错误。结果是我的后端不是 https 而我的前端是。通过使我的后端 https 修复它，我不再收到错误！