Axios 響應 Express 服務器的 POST 請求返回 404

Question

我在我的反應應用程序中使用 Axios。 在服務器端口 3000 上運行 React 應用程序，在端口 31001 上運行 express 服務器

我的反應組件——

import React from 'react';
import {Form,Button} from 'react-bootstrap';
import { Link,useHistory } from 'react-router-dom';
import Axios from "axios";

export default function Register(){
    let history = useHistory();
    
    function signMeUp(e){
        e.preventDefault()
        let userName = document.getElementById('username')?.value
        let password = document.getElementById('password')?.value
        let data = {
            userName:document.getElementById('username')?.value,
            password:document.getElementById('password')?.value,
        }
        
        Axios({
            method: "POST",
            url: "http://localhost:31001/register",
            data,
            headers: {
              "Content-Type": "application/json"
            }
          }).then(res => {
            console.log(res.data.message);
          });


        console.log(userName, password)
        
        if(userName && password){
            history.push("/Login");
        }
        else{
            alert('Enter a username / password')
        }
    }

    return(
        <div style={{width:"50vw",margin:"auto",marginTop:"50px"}}>
              <h1 style={{textAlign:"center",paddingBottom:"30px"}}>Book My Movie</h1>
              <h1 style={{textAlign:"center"}}>Register</h1>
              <Form onSubmit={(e)=>{signMeUp(e)}}>
                <Form.Group controlId="formBasicEmail">
                    <Form.Label>Email address</Form.Label>
                    <Form.Control type="email" placeholder="Enter email" id="username"  />
                    <Form.Text className="text-muted">
                    </Form.Text>
                </Form.Group>
              
                <Form.Group controlId="formBasicPassword">
                    <Form.Label>Password</Form.Label>
                    <Form.Control type="password" placeholder="Password" id="password" />
                </Form.Group>
                <Button variant="primary" type="submit" style={{width:"100%"}}>
                    Submit
                </Button>
                <div  style={{textAlign:"center",margin:"auto"}}>
                   <Link to="/Login">Already have a account ? Login Here</Link>
                </div>
              </Form>
        </div>
    );
}

我的服務器.js

const express = require("express"),
    app = express(),
    port = process.env.PORT || 31001,
    cors = require("cors");

app.use(cors());
app.listen(port, () => console.log("Backend server live on " + port));

app.get("/register", (req, res) => {
    res.send({ message: "We did it!" });
});

我還在 package.json 上放置了一個代理::

  "proxy": "http://localhost:31001",

這是我在 chrome 控制台上收到的錯誤：

xhr.js:184 POST http://localhost:31001/register 404 (Not Found)
createError.js:16 Uncaught (in promise) Error: Request failed with status code 404
    at createError (createError.js:16)
    at settle (settle.js:17)
    at XMLHttpRequest.handleLoad (xhr.js:69)

我已經閱讀了幾乎所有的 stackoverflow 解決方案，但對我沒有用。

Answer 1

該方法應該在 express post app.post("/register", (req, res) => {..因為我在前端你正在做method: "POST", :

 Axios({
            method: "POST",
            url: "http://localhost:31001/register",
            data,
            headers: {
              "Content-Type": "application/json"
            }
          }).then(res => {
            console.log(res.data.message);
          });

Answer 2

您正在請求POST但您正在偵聽GET請求。 您必須將快速路由更改為發布請求偵聽器。
在這種情況下，您將能夠獲取請求正文^{← （如果您正在發送）} ：

app.post("/register", (req, res) => { //<---change to post
   res.json({ message: "We did it!" }); // <----res.json to send data as json.
});