MERN 堆栈中的代理错误：无法将请求 /contact 从 localhost:3000 代理到 http://localhost:5000

Question

I know this question has been asked earlier but none of the solutions are working for me

Complete error log:

1. Shown on client side

Proxy error: Could not proxy request /contact from localhost:3000 to http://localhost:5000/.
See https://nodejs.org/api/errors.html#errors_common_system_errors for more information (ECONNRESET).

2. Shown on the server side network tab

Proxy error: Could not proxy request /contact from localhost:3000 to http://localhost:5000/ (ECONNRESET).

3. Shown in console

POST http://localhost:3000/contact 500 (Internal Server Error)
Uncaught (in promise) SyntaxError: Unexpected token P in JSON at position 0

The solutions tried

Package.json client side

  "name": "client",
  "version": "0.1.0",
  "private": true,
  "proxy": "http://localhost:5000",
  "dependencies": {
    "@testing-library/jest-dom": "^5.14.1",
    "@testing-library/react": "^11.2.7",
    "@testing-library/user-event": "^12.8.3",
    "framer-motion": "^4.1.17",
    "react": "^17.0.2",
    "react-dom": "^17.0.2",
    "react-router-dom": "^5.2.0",
    "react-scripts": "4.0.3",
    "web-vitals": "^1.1.2"
  },
}

package.json server side

  "name": "server",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1"
  },
  "author": "",
  "license": "ISC",
  "dependencies": {
    "bcryptjs": "^2.4.3",
    "cookie-parser": "^1.4.5",
    "dotenv": "^10.0.0",
    "express": "^4.17.1",
    "http-proxy-middleware": "^2.0.1",
    "jsonwebtoken": "^8.5.1",
    "mongoose": "^5.13.2"
  }
}

server side files

auth.js (main router file aka server.js)

router.get("/getdata", authenticate, (req, res) => {
  res.send(req.rootUser);
});

router.post("/contact", authenticate, async (req, res) => {
  console.log("in auth.js");
  try {
    const { name, email, phone, msg } = req.body;

    if (!name || !email || !phone || !msg) {
      console.log("fill all fields");
      return res.json({ error: "Fill all fields" });
    }

    //req.userID define in authenticate
    else {
      const userExists = await User.findOne({ _id: req.userId });

      if (userExists) {
        const userContact = await userExists.addMessage(name,email,phone,msg);
        await userExists.save();
        res.status(201).json({ message: "Message sent" });
      }
    }
  } catch (error) {
    console.log(error);
  }
});

userschema.js (model file for the database, only added the required code here instead of full code)

userSchema.methods.addMessage = async function (name, email, phone, msg) {
  try {
    this.messages = this.messages.concat({
      name,
      email,
      phone,
      msg,
    });
    await this.save();
    return this.messages;
  } catch (error) {
    console.log(error);
  }
};

client side file - about.js

const Contact = () => {
  const [userData, setUserData] = useState({name: "",email: "",phone: "",msg: "",});

  const getuserData = async () => {
    try {
      const res = await fetch("/getdata", {
        method: "GET",
        headers: {
          "Content-Type": "application/json",
        },
      });

      const data = await res.json();

      setUserData({
        ...userData,
        name: data.name,
        email: data.email,
        phone: data.phone,
      });

      if (!res.status === 200) {
        const error = new Error(res.error);
        throw error;
      }
    } catch (error) {
      console.log(error);
    }
  };

  useEffect(() => {
    getuserData();
  }, []);

  const handleInput = (e) => {
    const key = e.target.name;
    const value = e.target.value;
    setUserData({ ...userData, [key]: value });
  };

  const sendMessage = async (e) => {
    console.log("in func");
    e.preventDefault();
    const { name, email, phone, msg } = userData;

    const res = await fetch("/contact", {
      method: "POST",
      headers: {
        "Content-Type": "application/json",
      },
      body: JSON.stringify({
        name,
        email,
        phone,
        msg,
      }),
    });

    const data = await res.json();

    if (!data) {
      console.log("msg from contact page not sent");
    } else {
      alert("Message Sent!");
      setUserData({ ...userData, msg: "" });
    }
  };

Answer 1

我通过在 http://localhost:500 之后放置 / 来解决它，正确的方法是

"proxy": "http://localhost:5000/"