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

Question

So I test my routes o user on my backend with POSTAMN and everything works. But when I add axios on frontend to test the AXIOS POST, it sent me error server but all my values are okey. What I do wrong ? If somebody can help me, thanks.

Here is the error I get

enter image description here

so this is my form (formik) with axios request

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

And this is my app.js with route and autorization 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

I found the solution, so in my axios I had to add "data: values, headers: { 'Content-Type': 'application/json' }, body: JSON.stringify(values), })" So it give

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

And on my CORS BACKEND I made this:

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

So this is solve and I found this type of Axios with doc Axios : https://axios-http.com/docs/api_intro And when I saw that axios doesn't work I try with methode fetch: https://jasonwatmore.com/post/2020/02/01/react-fetch-http-post-request-examples