node.js - 尝试代理到 : localhost:3000/api/register in register form 时发生错误

Question

我正在尝试在前端使用 React 创建一个注册表单，并在后端使用 Typescript 创建 Express 和 MongoDB atlas。当我单击提交按钮时，没有任何反应，但是当我使用 Postman 应用程序发布请求时，我在长时间延迟后得到以下输出:

"Error occured while trying to proxy to: localhost:3000/api/register?email=test123@gmail.com&password=test123"

我的数据库中有一条空记录，类似这样:

_id: Object("5d7679d8fa74d54ebb0534b9")
__v: 0

经过长时间的延迟后，我在 vscode 的终端中看到此错误:

[HPM] Error occurred while trying to proxy request /api/register?email=test123@gmail.com&password=test123 from localhost:3000 to http://localhost:5000/ (ECONNRESET) (https://nodejs.org/api/errors.html#errors_common_system_errors)

我使用“create-react-app”创建了 React 前端，并且已经在帖子中执行了以下说明:When specified, "proxy" in package.json must be a string 。

问题是，我还有一个正在运行的联系表单，并且有一个代理在那里工作，当我在联系表单中单击“提交”时，我会收到电子邮件。

我在主文件夹(我用来同时运行前端和后端)中显示了我的 package.json，其中有两个文件夹:后端(其中有 dist 文件夹，我将 .ts 文件转换为 .js)和前端文件夹。

{
  "name": "ecommerce-template-mern",
  "version": "1.0.0",
  "main": "main.js",
  "license": "MIT",
  "scripts": {
    "build": "tsc -p backend/.",
    "backend": "nodemon backend/dist/main.js",
    "frontend": "cd frontend && npm run start",
    "dev": "concurrently --kill-others-on-fail \"npm run backend\" \"npm run frontend\""
  },
  "devDependencies": {
    "concurrently": "^4.1.2",
    "nodemon": "^1.19.2",
    "tsc-watch": "^3.0.0"
  },
  "dependencies": {
    "body-parser": "^1.19.0",
    "express": "^4.17.1",
    "http-proxy-middleware": "^0.20.0",
    "nodemailer": "^6.3.0",
    "typescript": "^3.6.2"
  }
}

以及我有代理的前端文件夹中的 package.json。

{
  "name": "frontend",
  "version": "0.1.0",
  "private": true,
  "proxy": "http://localhost:5000",
  "dependencies": {
    "@material-ui/core": "^4.4.0",
    "@material-ui/icons": "^4.2.1",
    "@types/jest": "24.0.18",
    "@types/node": "^12.7.2",
    "@types/react": "^16.9.2",
    "@types/react-dom": "^16.9.0",
    "axios": "^0.19.0",
    "formik": "^1.5.8",
    "http-proxy-middleware": "^0.20.0",
    "react": "^16.9.0",
    "react-dom": "^16.9.0",
    "react-router-dom": "^5.0.1",
    "react-scripts": "3.1.1",
    "styled-components": "^4.3.2",
    "typescript": "3.5.3",
    "yup": "^0.27.0"
  },
  "scripts": {
    "start": "react-scripts start",
    "build": "react-scripts build",
    "test": "react-scripts test",
    "eject": "react-scripts eject"
  },
  "eslintConfig": {
    "extends": "react-app"
  },
  "browserslist": {
    "production": [
      ">0.2%",
      "not dead",
      "not op_mini all"
    ],
    "development": [
      "last 1 chrome version",
      "last 1 firefox version",
      "last 1 safari version"
    ]
  },
  "devDependencies": {
    "@types/enzyme": "^3.10.3",
    "@types/react-router": "^5.0.3",
    "@types/react-router-dom": "^4.3.5",
    "@types/reactstrap": "^8.0.4",
    "@types/styled-components": "^4.1.18",
    "@types/yup": "^0.26.23",
    "bootstrap": "^4.3.1",
    "enzyme": "^3.10.0",
    "nodemon": "^1.19.1",
    "react-addons-test-utils": "^15.6.2",
    "react-bootstrap": "^1.0.0-beta.12",
    "reactstrap": "^8.0.1",
    "ts-node": "^8.3.0",
    "ts-node-dev": "^1.0.0-pre.42"
  }
}

下面是我的代码，它将数据放入我的 MongoDB 图集中:

import express, { Application, Request, Response } from "express";
import bodyParser from "body-parser";
import * as dotenv from "dotenv";

dotenv.config({ path: __dirname + "/../.env" });

const app: Application = express();

app.use(bodyParser.json());
app.use(bodyParser.urlencoded({ extended: false }));

const dbURI: any = process.env.MONGO_CONNECTION;

mongoose
  .connect(dbURI, {
    useNewUrlParser: true
  })
  .then(() => console.log("MongoDB Connected"))
  .catch(err => console.log(err));

const Schema = mongoose.Schema;
const UserSchema = new Schema({ email: String, password: String });

interface IUser extends mongoose.Document {
  email: string;
  password: string;
}

const User = mongoose.model<IUser>("User", UserSchema);

app.post("/api/register", (req: Request, res: Response) => {
  const newUser = new User({
    email: req.body.email,
    password: req.body.password
  });
  newUser.save().then(() => console.log("New user in database!"));
});

const PORT = 5000

app.listen(PORT, () => {
  console.log(`Server listening on port ${PORT}`);
});

上面的代码输出“数据库中的新用户!”，但正如我在帖子顶部所写的那样，我收到错误，并且数据库中的“空”对象。

此外，另一件事需要注意的是，当我运行下面的代码时:

const newUser2 = new User({
  email: "test@gmail.com",
  password: "123"
});
newUser2.save().then(() => console.log("New user in database!"));

我在 MongoDB 中获取了所需的数据记录。

我还在下面附上了我在 React 中的注册表单(在发送邮件时几乎可以使用相同的联系表单，所以我认为它没有问题):

import axios from "axios";
import { Field, Form, FormikProps, withFormik } from "formik";
import React from "react";
import * as Yup from "yup";

interface FormValues {
  email: string;
  password: string;
}

interface MyFormProps {
  initialEmail?: string;
  initialPassword?: string;
}

class RegisterForm extends React.PureComponent<FormikProps<FormValues>> {
  render() {
    const { values, touched, errors, isSubmitting } = this.props;
    return (
      <Form>
        <Field
          type="email"
          name="email"
          placeholder="email"
          value={values.email}
        />
        {touched.email && errors.email && <div>{errors.email}</div>}
        <Field
          type="password"
          name="password"
          placeholder="password"
          value={values.password}
        />
        {touched.password && errors.password && <div>{errors.password}</div>}
        <button type="submit" disabled={isSubmitting}>
          Submit
        </button>
      </Form>
    );
  }
}

const FormikRegisterForm = withFormik<MyFormProps, FormValues>({
  mapPropsToValues: props => {
    return {
      email: props.initialEmail || "",
      password: ""
    };
  },
  validationSchema: Yup.object().shape({
    login: Yup.string()
      .email("email is not valid")
      .required("email is required"),
    password: Yup.string().required("password is required")
  }),
  handleSubmit(values) {
    const { email, password } = values;
    axios
      .post("/api/register", {
        email,
        password
      })
      .then(res => {
        console.log(res);
      })
      .catch(err => {
        console.log(err);
      });
  }
})(RegisterForm);

export default FormikRegisterForm;

单击注册表中的提交按钮后，我可以更改哪些内容以获得数据库所需的结果？感谢您提前提供帮助。

Answer 1

这是Post类型的API。您应该在正文中发送电子邮件和密码。因此，在代码中，您将通过使用 req.body.email 和 req.body.password

来访问它们

localhost:3000/api/register?email=test123@gmail.com&password=test123"

如果您这样发送，那么您应该访问电子邮件和密码req.query.emailreq.query.password