React 应用程序表单无法 POST 到我的后端 api

Question

我已经通过 Postman 和 Insomnia 创建了一个带有 node 和 express 的后端 api，效果很好，但由于某种原因，我的 create 函数不会发布到我的 api。它可以很好地登录到 API，并且每个用户输入的字段都会返回表单，但问题与 axios.post 之后的某个地方有关，好像我输入了不正确的 url 它会抛出 404，但如果我输入正确url 它不会抛出任何错误，而是完全跳过 .then(response 函数并直接进入 console.log(3)。任何与此相关的想法或帮助都会很棒，谢谢！

进口

import {useState} from 'react'
import axios from 'axios'
import {TextField, MenuItem, FormControl, Select, InputLabel, Button, Checkbox} from '@mui/material'
import { useNavigate } from 'react-router-dom'

提交表单代码

const submitForm = () => {
        console.log(form)

        let token = localStorage.getItem('token')
        console.log(1)

        axios.post('http://localhost:9000/miniatures/create', form,{
            headers: {
                "Content-Type": "application/json",
                "Authorization": `jwt ${token}`
            }
        })
                .then(response => {
            console.log(2)
            console.log(response.data)
            navigate(`/miniatures/${response.data._id}`)
        })
        .catch(err => console.log(err))
        console.log(3)
    }

Answer 1

React 可能不知道如何proxy API requests to the Express server。

在package.json为前端，尝试添加：

  "proxy": "http://localhost:9000",

然后，将您的post 请求发送到（类似）axios.post(/miniatures/create)。确切的路径将取决于您如何构建 Express 路线。可能类似于/api/miniatures/create。

在开发中，开发服务器会识别出它不是 静态资产，并将代理您的请求。