NodeJS 从react到节点express用axios发布表单响应

krcsximq 于 2022-11-29 发布在 Node.js

关注(0)|答案(1)|浏览(133)

我不太清楚为什么这个不起作用。我正在尝试使用axios从react发布到express。我学习了一个教程，学习了如何将react frontend连接到express服务器，它可以通过代理从服务器获取数据。但是，当我尝试从react发布数据到服务器时，它不起作用。我被提示有两个未捕获的错误（由于刷新而无法看到它们）然后该页面立即用投递到原始React页面的URL的表单响应来刷新页面。

client/package.json

{
  "name": "syllabus.io",
  "version": "0.1.0",
  "proxy": "http://localhost:8000/",
...

client/Login.js

import '../App.css';
import React, {useState} from 'react';
import axios from 'axios';

function Login() {
    const [data, setData] = useState({
      email: "",
      password: ""
    });

    function handleLogin(e) {
      e.preventDafault();
      console.log(data.email, data.password);
      axios
      .post('http://localhost:8000/api/login-post', data)
      .then(() => console.log('Book Created'))
      .catch(err => {
        console.error(err);
      });
    }

    function handleInput(e) {
      const newData={...data};
      newData[e.target.id] = e.target.value;
      setData(newData);
    }
    

    return ( 
    <div id="login" className="login">
        <body>
          <h1 id="title">Login</h1>
          <div class="form">
            <form onSubmit={(e) => handleLogin(e)}>
            <input type="text" onChange={(e) => handleInput(e)} className="email" name="email" value={data.email} id="email" placeholder="Email"/> 
            <input type="text" onChange={(e) => handleInput(e)} className="password" name="password" value={data.password} id="password" placeholder="Password"/> 
            <input id="Login" className="Login" type="submit" value="Login"/> 
            </form>
          </div>
        </body>
      </div>
    );
  }
export default Login;

server/server.js

const express = require('express');
const app = express();


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

app.get("/api", (req, res) => {
    res.json({"user": ["userOne", "userTwo", "userThree"]})
})

app.post("/api/login-post", (req, res) => {
    console.log(req.body)
    res.send("Success")
})

app.listen(8000, () => {console.log('Server started on port 8000...')})

编辑：检查保留日志后，错误为