React Native与Node.js+MySQL连接出现Network Error问题求助

问题描述 #

我通过Talend API测试工具验证了Node.js与MySQL的连接完全正常，但在React Native应用中尝试添加任务时，出现【LOG [Error: Network Error]】的日志信息。我认为问题出在React Native端，但无法自行解决，希望能得到帮助以完成应用与数据库的连接。

相关代码 #

React Native前端代码 #

import React, {useState} from "react";
import { Dimensions, StatusBar } from "react-native";
import styled, {ThemeProvider} from "styled-components/native";
import {theme} from './theme';
import Input from './components/Input';
import Task from './components/Task';
import Axios from 'axios';

const Container = styled.SafeAreaView`
flex: 1;
background-color: ${({theme}) => theme.background};
align-items: center;
justify-content: flex-start;`;

const Title = styled.Text`
font-size: 40px;
font-weight: 600;
color: ${({theme}) => theme.main};
align-self: flex-start;
margin: 0px 20px`;

const List = styled.ScrollView`
    flex: 1;
    width: ${({width})=> width - 40}px;`;

export default function App() {
    const width = Dimensions.get('window').width;

    const [newTask, setNewTask] = useState('');
    const [tasks, setTasks] = useState([]);

    const getTasks = () => {
        Axios.get('/todos')
          .then(res => {
            setTasks(res.data);
          })
          .catch(error => console.log(error));
      };

    const _addTask = () => {
        const newTaskObject = {
            text: newTask,        
            completed: false 
        };
        Axios.post('/create', newTaskObject)
        .then(res => {
          console.log(res.data);
          setNewTask('');
          getTasks();
        })
        .catch(error => console.log(error));
    };

    const _deleteTask = id => {
        const currentTasks = Object.assign({},tasks);
        delete currentTasks[id];
        setTasks(currentTasks);
    };

    const _toggleTask = id => {
        const currentTasks = Object.assign({}, tasks);
        currentTasks[id]['completed'] = !currentTasks[id]['completed'];
        setTasks(currentTasks);
    };

    const _updateTask = item => {
        const currentTasks = Object.assign({}, tasks);
        currentTasks[item.id] = item;
        setTasks(currentTasks);
    };

    const _handleTextChange = text => {
        setNewTask(text);
    };

    const _onBlur = () => {
        setNewTask('');
    };
    

    return (
        <ThemeProvider theme={theme}>
            <Container>
                <StatusBar barStyle="light-content"
                backgroundColor={theme.background}/>
                <Title>TODO List</Title>
                <Input placeholder="+ Add a Task"
                value={newTask}
                onChangeText={_handleTextChange}
                onSubmitEditing={_addTask}
                onBlur={_onBlur}/>
                <List width={width}>
                    {Object.values(tasks)
                    .reverse()
                    .map(item => (
                        <Task key={item.id} item={item} deleteTask={_deleteTask} toggleTask={_toggleTask} updateTask={_updateTask}/>
                    ))}
                </List>
            </Container>
        </ThemeProvider>
    );
}

Node.js后端代码 #

const express = require("express");
const app = express();
const mysql = require("mysql");
const cors = require("cors");

app.use(cors());
app.use(express.json());

const db = mysql.createConnection({
  host     : 'localhost',
  user     : 'root',
  password : 'thtjdgk0901!',
  database : 'todolistSystem',
});

app.post("/create", (req, res) => {
  const { text, completed } = req.body;
  
  db.query(
    "INSERT INTO TODOLISTSYSTEM.TODOS (TEXT, COMPLETED) VALUES (?,?)",
    [text, completed],
    (err, result) => {
      if (err) {
        console.log(err);
      } else {
        res.send("Inserted values successfully!");
      }
    }
  );
});

app.get("/todos", (req, res) => {
  db.query("SELECT * FROM TODOLISTSYSTEM.TODOS", (err, result) => {
    if (err) {
      console.log(err);
    } else {
      res.send(`Selected values successfully!`);
    }
  });
});

app.put("/todos", (req, res) => {
  const id = req.body.id;
  const text = req.body.text;
  const completed = req.body.completed;


  db.query(
    "UPDATE TODOLISTSYSTEM.TODOS SET TEXT = ?, COMPLETED = ? WHERE ID = ?;",
    [text, completed, id],
    (err, result) => {
      if (err) {
        console.log(err);
      } else {
        res.send(`Updated values successfully!`);
      }
    }
  );
});

app.delete("/todos/:id", (req, res) => {
  const { id } = req.params;
  console.log(id);
  db.query(
    "DELETE FROM TODOLISTSYSTEM.TODOS WHERE ID = ?",
    [id],
    (err, result) => {
      if (err) {
        console.log(err);
      } else {
        res.send(`Deleted values successfully!`);
      }
    }
  );
});

app.listen(3001, () => {
  console.log("Your server is running on port 3001");
});

解决步骤 #

1. 配置Axios基础URL #

React Native中使用相对路径会导致无法定位后端服务器，必须指定完整的基础URL：

// 在导入Axios后添加以下代码
Axios.defaults.baseURL = 'http://你的电脑局域网IP:3001';

注意：不能用localhost，模拟器/真机无法直接访问电脑的localhost，需替换为电脑在局域网内的IP地址（如192.168.1.105）。

2. 修正后端接口返回格式 #

当前后端接口返回的是纯字符串，但React Native期望JSON格式数据，修改接口：

• /todos接口返回查询结果：

  app.get("/todos", (req, res) => {
    db.query("SELECT * FROM TODOLISTSYSTEM.TODOS", (err, result) => {
      if (err) {
        console.log(err);
        res.status(500).json({error: err.message});
      } else {
        res.json(result); // 返回JSON格式的任务列表
      }
    });
  });
  

• 其他接口也统一返回JSON：

  // 示例：/create接口修改
  res.json({message: "插入成功", insertId: result.insertId});
  

3. 确认网络权限 #

• Android：在android/app/src/main/AndroidManifest.xml中添加网络权限：

  <uses-permission android:name="android.permission.INTERNET" />
  

• iOS：在ios/项目名/Info.plist中添加允许HTTP请求的配置（开发环境）：

  <key>NSAppTransportSecurity</key>
  <dict>
    <key>NSAllowsArbitraryLoads</key>
    <true/>
  </dict>
  

4. 验证CORS配置 #

确保后端CORS中间件正常工作，开发环境可暂时设置允许所有来源：

app.use(cors({
  origin: '*',
  credentials: true
}));

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