如何使用react native、expo、expressjs和mongodb修复“网络错误”

Question

我目前正在开发一款用于学习目的的卡路里跟踪应用程序。现在我正在尝试使用 axios 将 React Native 前端连接到后端，但是出现以下错误：

Network Error
at node_modules\axios\lib\adapters\xhr.js:null in handleError
at node_modules\event-target-shim\dist\event-target-shim.js:null in dispatchEvent
- ... 9 more stack frames from framework internals

我在 stackoverflow 和 GitHub 上查看了很多与此问题相关的线程，但它们都导致了相同的错误。我已验证地址 axios 正在尝试访问邮递员上的作品。

这是代码，现在我正在使用 React Native 的 Expo 来创建我的应用程序。

来自前端

  const addMeal = async (name, foodItems) => {
    return await axios
      .post("http://localhost:5000/meals", {
        title: name,
        foodItems: foodItems,
      })
      .then((res) => {
        hideModal();
        setMealName("");
      })
      .catch((error) => {
        console.log(error);
      });
  };

来自后端

import express from "express";
import { PORT, mongDBURL } from "./config.js";
import mongoose from "mongoose";
import { Meal } from "./models/mealModels.js";
import cors from "cors";

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

app.get("/", (req, res) => {
  res.send({ status: "Started" });
});

// PORT = 5000
app.listen(PORT, () => {
  console.log(`Listening on port ${PORT}`);
});

app.post("/meals", async (req, res) => {
  try {
    const newMeal = {
      title: req.body.title,
      foodItems: req.body.foodItems,
    };
    const meal = await Meal.create(newMeal);
    console.log("Successful");
    return res.status(201).send(meal);
  } catch (err) {
    console.log(err.message);
  }
});

mongoose
  .connect(mongDBURL, {
    useNewUrlParser: true,
    useUnifiedTopology: true,
  })
  .then(() => {
    console.log("Connected to database");
  })
  .catch((error) => {
    console.log(error);
  });

Answer 1

我认为你需要将 Android 设备上的端口公开到计算机上的端口。

由于您在 5000 端口上运行后端，请尝试使用以下命令看看它是否有效

adb reverse tcp:5000 tcp:5000