Expo环境下React Native用Axios发POST请求遇网络错误求助

技术栈 #

• 前端：React Native
• 前端平台：Expo
• 后端：Node.js
• 数据库：MySQL/Sequelize
• HTTP请求工具：Axios

问题描述 #

后端有一个POST路由，用于记录接口被调用的日期和时间。该接口在Postman中可正常工作，但在App中点击按钮调用时，返回Axios网络错误。已尝试在后端使用cors模块及自定义响应头中间件，均未解决问题。

客户端代码 #

/client/utils/api.js #

import axios from 'axios'

const api = axios.create({
  baseURL: 'http://localhost:5000'
})

export default api

/client/components/pages/registrar/index.js #

import React from 'react';
import { Image, StyleSheet, View, Text, Button } from 'react-native';
import { 
  Container,  
  Input,
  ButtonSubmit,
  TextButtonSubmit
} from "./styles";
import api from '../../../utils/api';
//import axios from 'axios'

const styles = StyleSheet.create({
  tamLogo:{
    width: 90,
    height: 90
  }
})

function Registrar(){
  
  function onFormSubmit(){
    api.post('/registro/registrar')
      .then((res) => {
        console.log("Entrou no then")
      })
      .catch((error) => {
        console.log(JSON.stringify(error))
      })
  }

  return(
    <Container>

      <Image
        style = {styles.tamLogo}
        source = {{uri: "https://cdn-icons-png.flaticon.com/512/17/17004.png"}}
      />

      <Input autoCapitalize="none"/>
      <Input secureTextEntry={true} />
      <ButtonSubmit onPress={onFormSubmit} >
        <Text>Registrar ponto</Text>
      </ButtonSubmit>

    </Container>
    
  )
}

export default Registrar;

服务端代码 #

/server/index.js #

const express = require('express')
const cors = require('cors')
const conn = require('./db/conn')

const app = express()

app.use(express.json())
//I'm using cors module as suggested in https://stackoverflow.com/questions/45980173/react-axios-network-error
app.use(cors({
  origin: 'http://localhost:3000'
}))

// I tried this suggestion answered in https://stackoverflow.com/questions/49132636/post-request-axios-network-error

/*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();
});*/

app.get('/',(req,res) => {
  res.send("Estamos no back-end do app de pontos")
})

app.use('/registro',require('./routes/RegistroRoutes'))

// conn.sync({force:true}) // resetando o banco
 conn.sync() // mantendo os dados do banco
  .then(() => {
    app.listen(5000,()=>{
      console.log("Estamos rodando o back-end na porta 5000")
    })
  })
  .catch(e => console.error('Erroooooo: ' + e))

Axios错误响应 #

{
  "message":"Network Error",
  "name":"AxiosError",
  "stack":"AxiosError@http://192.168[...]",
  "config":{
    "transitional":{
      "silentJSONParsing":true,
      "forcedJSONParsing":true,
      "clarifyTimeoutError":false
    },
    "transformRequest":[null],
    "transformResponse":[null],
    "timeout":0,
    "xsrfCookieName":"XSRF-TOKEN",
    "xsrfHeaderName":"X-XSRF-TOKEN",
    "maxContentLength":-1,
    "maxBodyLength":-1,
    "env":{},
    "headers":{
      "Accept":"application/json, text/plain, */*"
    },
    "baseURL":"http://localhost:5000",
    "method":"post",
    "url":"/registro/registrar"
  },
  "code":"ERR_NETWORK",
  "status":null
}

可行排查方案 #

1. 替换localhost为局域网IP
   Expo模拟器/真机无法通过localhost访问本地后端，需替换为电脑的局域网实际IP（如http://192.168.x.x:5000），可通过ipconfig(Windows)或ifconfig(Mac/Linux)查询。

2. 修改后端监听地址
   确保Node.js服务监听0.0.0.0而非127.0.0.1，这样局域网设备才能访问：

   app.listen(5000, '0.0.0.0', () => {
     console.log("Estamos rodando o back-end na porta 5000")
   })
   

3. 验证网络连通性
   在模拟器/真机浏览器中访问http://你的IP:5000，确认能看到后端返回内容。若无法访问，检查防火墙是否放行5000端口，或后端服务是否正常运行。

4. 调整CORS配置
   当前CORS的origin设置为http://localhost:3000，但Expo应用的源并非此值，可临时设置origin: "*"测试：

   app.use(cors({
     origin: "*"
   }))
   

   测试通过后再设置为具体允许的来源。

5. 补充请求参数
   确认后端路由是否要求必须携带参数，即使是空对象，也可在请求中添加：

   api.post('/registro/registrar', {})
   

6. 使用Expo调试工具
   通过Expo DevTools的网络面板查看请求详情，确认请求是否发送及隐藏错误信息。

内容的提问来源于stack exchange，提问作者OPaulo