React中axios POST对接MySQL后端报错 Postman测试同接口正常

对接MySQL数据库的后端服务用Postman测试所有用户相关路由均可正常运行，但前端React项目通过axios发起POST请求时返回服务端错误，核对提交的所有参数值均正确，无法定位问题原因。
报错截图

前端Formik自定义输入组件代码 #

import React from "react";
import {ErrorMessage, useField } from 'formik';

export const TextField = ({ label, ...props}) => {
    const [field, meta] = useField(props);
    return (
        <div className="input-form">
            <label htmlFor={field.name}>{label}</label>
            <input className={`form ${meta.touched && meta.error && 'is-invalid'}`} {...field} {...props} />
            <ErrorMessage component="div" name={field.name} className="error"/>
        </div>
    )
}

前端登录页Formik+axios请求代码 #

import React from "react";
import {Formik, Form} from 'formik';
import { TextField } from "./TextField";
import * as Yup from 'yup';
import axios from "axios";

export const Login = () => {

    const validate = Yup.object({
        email: Yup.string()
          .email('Email is invalid')
          .required('Email is required'),
        password: Yup.string()
          //.min(6, 'Password must be at least 6 charaters')
          .required('Password is required'),
      })

   
    return (
        <Formik initialValues={{
            email: '',
            password: '',
        }}   validationSchema={validate}
        onSubmit={values => {
            
            axios({
                method: "post",
                url: `http://localhost:3001/api/auth/login`, values,
              }).then(function (res) {
                console.log("envoie-avant erreur")
                console.log(res);
                console.log(res.values);
                console.log("values");
              }).catch((err) => {
                  console.log(err); 
                  console.log("error-value")
                  console.log(values)
                  console.log("lecture de values après refus")
                });
            console.log(values)
            console.log("test-values")
        }}
        >
            
        { formik => (
          <div className="size-column-form">
          <h1>Login</h1>
           <Form>
                <TextField label="Email" name="email" type="email"/> 
                <TextField label="password" name="password" type="password"/>
                <button className="btn-bleu" type="submit">Se Connecter</button>               
           </Form>
      </div>
        )}
    </Formik>
    )
}

后端Express配置（路由+CORS）代码 #

const express = require("express");
//创建express应用
const path = require("path");
const Sequelize = require("sequelize");
const app = express();


//环境变量配置
require("dotenv").config();
console.log(process.env);

//路由导入
const authRoutes = require("./routes/user");

//解析json格式请求体
app.use(express.json());

const cors = require('cors');
const corsOptions ={
    origin:'http://localhost:3000/', 
    credentials:true,
    optionSuccessStatus:200
}
app.use(cors({credentials: true, origin: 'http://localhost:3000/'}));

// 全局CORS处理中间件
app.use((req, res, next) => {
  res.setHeader("Access-Control-Allow-Origin", "*");
  res.setHeader(
    "Access-Control-Allow-Headers",
    "Origin, X-Requested-With, Content, Accept, Content-Type, Authorization",
    "x-access-token, Origin, Content-Type, Accept"
  );
  res.setHeader("Access-Control-Allow-Credentials", "true");
  res.setHeader(
    "Access-Control-Allow-Methods",
    "GET, POST, PUT, DELETE, PATCH, OPTIONS"
  );
  next();
});

//静态资源托管
app.use("/images", express.static(path.join(__dirname, "images")));

//路由挂载
app.use("/api/auth", authRoutes);

module.exports = app;

问题由两处错误共同导致，按以下顺序修改即可：

1. axios请求参数写法错误（核心原因）
   你当前的axios配置写法不符合语法规范，POST请求的请求体参数必须通过data字段声明，直接把values写在配置对象中不会被识别为请求体，后端接收不到任何提交参数，自然触发服务端错误。
   将axios请求部分修改为：

axios({
    method: "post",
    url: "http://localhost:3001/api/auth/login",
    data: values // 明确指定data字段承载请求参数
})

也可以直接用axios的post方法简写：

axios.post("http://localhost:3001/api/auth/login", values)

2. 后端CORS配置冲突
   你同时使用了cors第三方中间件和自定义的全局CORS处理中间件，两处配置存在矛盾：cors中指定允许的源为http://localhost:3000/，自定义中间件又将允许源设为通配符*，但开启credentials: true（携带凭证）模式时，Access-Control-Allow-Origin不允许设置为*，会直接触发跨域拦截。
   直接删除自定义的全局CORS中间件代码，统一使用cors包的配置即可，注意去掉origin末尾多余的斜杠：

const corsOptions ={
    origin:'http://localhost:3000', // 删除末尾斜杠
    credentials:true,
    optionSuccessStatus:200
}
app.use(cors(corsOptions));

修改完成后重启后端服务、刷新前端页面重新测试即可正常请求。

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