使用 React，Express 获取 404 onSubmit

Question

我正在开发一个简单的 MERN 应用程序。我正在尝试连接服务器 onSubmit() 上的两端和 post 数据。我能够访问服务器 URL directly.However，当从 React 页面请求它时，我得到 POST http://localhost:1337/api/register 404（未找到） . 任何形式的帮助将不胜感激谢谢

server/index.js

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

app.use(cors())
app.use(express.json())

app.get('/api/register', (req, res) =>{
    console.log(req.body)
    res.json({status:'ok'})
})

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

client/App.js

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

function App() {
  const [name, setName] = useState('')
  const [email, setEmail] = useState('')
  const [password, setPassword] = useState('')


  async function registerUser(event){
    event.preventDefault()

    const response = await fetch('http://localhost:1337/api/register',{
    method:'POST',
    headers:{
      'Content-Type': 'application/json',
    },  
    body:JSON.stringify({
        name,
        email,
        password 
      }),
    })

    const data = await response.json()

    console.log(data)
  }
  return (
    <div>
      <h1>Register</h1>
      <form onSubmit = {registerUser}>
        <input 
        value = {name}
        onChange = {(e)=> setName(e.target.value)}
        type="text" 
        placeholder="Name"/>
        <br/>
        
        <input 
        value = {email}
        onChange = {(e)=> setEmail(e.target.value)}
        type="email" 
        placeholder="Email"/>
        <br/>
        
        <input 
        value = {password}
        onChange = {(e)=> setPassword(e.target.value)}
        type="password" 
        placeholder="Password"/>
        <br/>

        <input type = "submit" value = "Register"/>

      </form>
    </div>
  );
}

export default App;

谢谢

Answer 1

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

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

app.post('/api/register', (req, res) =>{
    console.log(req.body)
    res.json({status:'ok'})
})

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

对于post请求，我们必须告诉我们的API请求它是POST所以我们必须用POST初始化我们的请求方法.

使用 React，Express 获取 404 onSubmit

Getting 404 onSubmit using React, Express

node.js

express

reactjs

mern