React 上的 axios POST 不适用于后端 MYSQL(但适用于邮递员)

Question

所以我在后端使用POSTAMN测试我的路由用户，一切正常。但是当我在前端添加axios来测试axios POST时，它向我发送了错误服务器，但我的所有值都是正确的。我做错了什么?如果有人能帮助我，谢谢。

这是我得到的错误

输入图片描述

这是我的表单(formik)带有axios请求

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>
)
}

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>
)
}

这是我的app。js带有路由和授权CORS

const express = require("express");
//crééer un application express
const path = require("path");
const Sequelize = require("sequelize");
const app = express();

//variable d'environnement
require("dotenv").config();
console.log(process.env);
//const morgan = require("morgan");
//mysql importation connexion
//app.use(morgan("dev"));
//import des routes
const authRoutes = require("./routes/user");
//intercepter toute requête d'un contenttype.json
app.use(express.json());
const cors = require('cors');
const corsOptions ={
origin:'http://localhost:3000/', 
credentials:true,            //access-control-allow-credentials:true
optionSuccessStatus:200
}
app.use(cors({credentials: true, origin: 'http://localhost:3000/'}));
// middlewear general qui s'applique à toute les roots qui permet de gerer les 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();
});
//Gestion de la ressource images de façon statique
app.use("/images", express.static(path.join(__dirname, "images")));
//routes
app.use("/api/auth", authRoutes);
// pour exporter l'application/constante pour acceder aux fichiers depuis notre server node
module.exports = app;

Answer 1

我找到了解决方案，所以在我的axios中我必须添加"数据:价值观,标题:{"内容类型":"application/json"}，JSON.stringify(values)，})"所以它给出

validationSchema={validate} onSubmit={values => {
axios({
method: "post",
url: `http://localhost:3001/api/auth/login`, 
data: values,
headers: {
'Content-Type': 'application/json'
},
body: JSON.stringify(values),
}) .then((res) => {
console.log(res);
if (res.data.errors) {
emailError.innerHTML = res.data.errors.values;

} else {
window.location = "/home";
}
})
.catch((err) => {
console.log(err);
});
}}

在我的CORS后端，我做了这个:

const cors = require('cors');
const corsOptions ={
origin:'http://localhost:3000/', 
credentials:true,            //access-control-allow-credentials:true
optionSuccessStatus:200
}
app.use(cors({credentials: true, origin: 'http://localhost:3000'}));
// middlewear general qui s'applique à toute les roots qui permet de gerer les CORS
app.use((req, res, next) => {
res.header('Access-Control-Allow-Origin', "*");
res.header('Access-Control-Allow-Methods', 'GET,PUT,POST,DELETE');
res.header('Access-Control-Allow-Headers', 'Origin, X-Requested-With, Content, Accept, Content-Type, Authorization');
res.header("Access-Control-Allow-Credentials", "true");
next();
});

所以这是解决方案，我找到了这种类型的Axios doc Axios: https://axios-http.com/docs/api_intro当我看到axios不工作时我尝试使用methode fetch: https://jasonwatmore.com/post/2020/02/01/react-fetch-http-post-request-examples