Axios关于React Dosen的帖子与后端MySQL一起使用（但在Postman上工作）

Question

因此，我在PostAMN的后端测试了我的路线O用户，一切都可以。但是，当我在前端添加Axios来测试Axios帖子时，它向我发送了错误服务器，但我所有的值都是Okey。 我做错了什么？如果有人可以帮助我，谢谢。

这是我得到的错误，我得到

在此处输入图像描述

所以这是我的formik（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

我找到了解决方案，所以在我的轴上我必须添加
“数据：值，
标题：{
'content-type'：'应用程序/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();
});

因此，这是解决的，我发现了具有Doc Axios的这种类型的Axios： https://axios-httpp.com /docs/api_intro
当我看到Axios不起作用时，我尝试使用methode提取： https://jasonwatmore.com/post/2020/02/01/react-fetch-http-post-post-request-request-examples