Axios POST请求响应Express服务器返回404

Question

我在react应用程序中使用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!" });
});

我还在包.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

方法应该是表达式app.post("/register", (req, res) => { ..中的post因为我前端你在做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.
});