代理错误：无法将请求 /auth/register 从 localhost:3000 代理到 http://localhost:8800/api/

注册.jsx

import React from 'react'
import { useState } from "react";
import {Link } from 'react-router-dom'
import axios from "axios";

const Register = () => {
const [inputs,setInputs] = useState({
  username:"",
  email:"",
  password:"",
})
const [err, setError] = useState(null)
const handleChange = e =>{
  setInputs(prev=>({...prev, [e.target.name]: e.target.value}))
}

const handleSubmit = async e =>{
  e.preventDefault()
//  try{
   const res = await axios.post("/auth/register", inputs)
console.log ("test",res)
// }catch(err){
  // console.log("test",err.response.data)
  // }
}

  return (

    <div className='auth'>
        <h1>Register</h1>
        <form>
            <input required type="text" placeholder='username' name='username' onChange={handleChange}/> 
            <input required type="email" placeholder='email' name='email' onChange={handleChange}/>
            <input required type="password" placeholder='password' name='password' onChange={handleChange}/>
            <button onClick={handleSubmit} >Register</button>
            {err &&<p>{err}</p>}
            <span>Do you have an account? <Link to="/login">Login</Link>
            </span>
        </form>
    </div>
  );
}

export default Register

auth.js

import { db } from "../db.js";
import bcrypt from "bcryptjs";

export const register = (req, res) => {
    //CHECK EXISTING USER
    const q = "SELECT * FROM users WHERE email = ? OR username = ?";
  
    db.query(q, [req.body.email, req.body.username], (err, data) => {
      if (err) return res.status(500).json(err);
      if (data.length) return res.status(409).json("User already exists!");
  
      //Hash the password and create a user
      const salt = bcrypt.genSaltSync(10);
      const hash = bcrypt.hashSync(req.body.password, salt);
  
      const q = "INSERT INTO users(`username`,`email`,`password`) VALUES (?)";
      const values = [req.body.username, req.body.email, hash];
  
      db.query(q, [values], (err, data) => {
        if (err) return res.status(500).json(err);
        return res.status(200).json("User has been created.");
      });
    });
  };

export const login = (req, res) ={};
export const logout = (req, res) ={};

包.json

{
  "name": "booking",
  "version": "0.1.0",
  "private": true,
  "dependencies": {
    "@testing-library/jest-dom": "^5.16.4",
    "@testing-library/react": "^13.1.1",
    "@testing-library/user-event": "^13.5.0",
    "axios": "^0.27.2",
    "dompurify": "^2.4.0",
    "moment": "^2.29.4",
    "react": "^18.0.0",
    "react-dom": "^18.0.0",
    "react-quill": "^2.0.0",
    "react-router-dom": "^6.4.1",
    "react-scripts": "5.0.1",
    "sass": "^1.55.0",
    "web-vitals": "^2.1.4"
  },
  "scripts": {
    "start": "react-scripts start",
    "build": "react-scripts build",
    "test": "react-scripts test",
    "eject": "react-scripts eject"
  },
  "eslintConfig": {
    "extends": [
      "react-app",
      "react-app/jest"
    ]
  },
  "browserslist": {
    "production": [
      ">0.2%",
      "not dead",
      "not op_mini all"
    ],
    "development": [
      "last 1 chrome version",
      "last 1 firefox version",
      "last 1 safari version"
    ]
  },
  "proxy": "http://localhost:8800/api/"
}

我正在关注教程

我陷入了这个错误：代理错误：无法将请求 /auth/register 从 localhost:3000 代理到 http://localhost:8800/api/。 看https://nodejs.org/api/errors.html#errors_common_system_errors https://nodejs.org/api/errors.html#errors_common_system_errors了解更多信息（ECONNREFUSED）。

请帮忙

我尝试了网上的所有方法都不起作用

看一眼开发中代理 API 请求 https://create-react-app.dev/docs/proxying-api-requests-in-development。当你在里面定义React服务器代理时package.json，它不应在末尾包含路径名（/api）就像你一样。它应该看起来像：

"proxy": "http://localhost:8800",

它还假设您正在使用/api/*要求。在你的情况下，你正在使用/auth/*.

我建议使用client/src/setupProxy.js文件。这样你就可以定义多个代理到后端的路径：

const { createProxyMiddleware } = require('http-proxy-middleware');

const proxy_urls = ['/api/*', '/auth/*'];

const target = 'http://localhost:8800';

module.exports = function (app) {
  proxy_urls.forEach((url) => {
    app.use(url, createProxyMiddleware({ target }));
  });
};