React前端调用后端Signup接口遇Axios 404错误求助

问题代码（Signup组件） #

import React from "react";
import { Link } from "react-router-dom";
import img from "../../../public/images/shared/audiophile-logo.svg";
import axios from "axios";
import { useState } from "react";

const Signup = () => {
  const [name, setName] = useState("");
  const [email, setEmail] = useState("");
  const [password, setPassword] = useState("");

  const handleSubmit = async (event) => {
    event.preventDefault();
    try {
      const response = await axios.post(
        "/api/auth/signup",
        { name, email, password }
      );
      console.log(response.data);
    } catch (err) {
      console.error(err);
    }
  };

  return (
    <div className="w-full h-screen flex justify-center items-center">
      <div className="w-[90%] my-auto mx-auto  text-left border-2 rounded-md border-black lg:w-[30%]">
        <div className=" mt-5  text-center w-full h-9 ">
          <h1 className="text-4xl font-semibold font-mono">audiophile</h1>
        </div>
        <form className="flex gap-5 flex-col w-[70%] mx-auto py-7">
          <label>Name</label>
          <input
            className="border-2 h-9  border-slate-700 rounded-xl"
            name="name"
            placeholder="name"
            type="text"
            onChange={(e) => setName(e.target.value)}
          />
          <label>Email</label>
          <input
            name="email"
            className="border-2 h-9  border-slate-700 rounded-xl"
            placeholder="email"
            type="email"
            onChange={(e) => setEmail(e.target.value)}
          />
          <label>Password</label>
          <input
            className="border-2 h-9  rounded-xl border-slate-700"
            name="password"
            placeholder="password"
            type="password"
            onChange={(e) => setPassword(e.target.value)}
          />
        </form>
        <div className="w-full  pb-5 flex flex-col justify-center items-center">
          <button onClick={handleSubmit} className="bg-black w-[70%] h-8 rounded-xl text-white font-thin ">Create an Account</button>
          <Link to="/login" className="">Already have a account? <span className="hover:text-yellow-500g">Login</span></Link>
        </div>
      </div>
    </div>
  );
};
export default Signup;

错误信息 #

AxiosError {message: 'Request failed with status code 404', name: 'AxiosError', code: 'ERR_BAD_REQUEST', config: {…}, request: XMLHttpRequest, …}

排查解决步骤 #

• 核对Vite代理配置
  打开vite.config.js/ts，确认代理规则正确指向后端服务，示例配置：

  import { defineConfig } from 'vite'
  import react from '@vitejs/plugin-react'
  
  export default defineConfig({
    plugins: [react()],
    server: {
      proxy: {
        '/api': {
          target: 'http://localhost:3000', // 替换为你的后端实际端口
          changeOrigin: true,
          // 若后端接口无/api前缀，需添加路径重写：
          // pathRewrite: { '^/api': '' }
        }
      }
    }
  })
  

  修改配置后必须重启Vite开发服务，否则配置不生效。

• 验证请求路径匹配

  1. 确认后端signup接口的实际路径：如果后端接口是/auth/signup，前端请求/api/auth/signup时，需在代理配置中添加pathRewrite: { '^/api': '' }去掉前缀。
  2. 在浏览器地址栏直接访问http://localhost:前端端口/api/auth/signup（比如前端端口为5173则访问http://localhost:5173/api/auth/signup），若返回404，说明代理未生效或路径不匹配；若能得到后端响应，再排查前端代码。

• 检查Axios全局配置
  查看是否全局设置了Axios的baseURL，比如：

  axios.defaults.baseURL = '/api'
  

  这种情况下前端请求/api/auth/signup会拼接为/api/api/auth/signup，导致路径错误，需将请求路径改为/auth/signup。

• 优化表单提交逻辑
  当前按钮通过onClick触发提交，建议给<form>标签绑定onSubmit={handleSubmit}，同时将按钮type设为submit，既支持回车提交，也确保默认行为被正确阻止：

  <form onSubmit={handleSubmit} className="flex gap-5 flex-col w-[70%] mx-auto py-7">
    {/* ...表单内容... */}
    <button type="submit" className="bg-black w-[70%] h-8 rounded-xl text-white font-thin ">Create an Account</button>
  </form>
  

内容的提问来源于stack exchange，提问作者ATHUL SURESH