Axios POST请求返回404错误求助：服务器连通且Postman测试正常但前端请求失败

我之前也碰到过几乎一模一样的问题，结合你给出的代码和请求信息，咱们来逐个排查可能的原因：

1. 表单提交事件绑定错误（最可能的根因） #

你当前的表单代码里，onSubmit={handleSubmit()}会在组件渲染时立即执行handleSubmit函数，而不是点击提交按钮时触发。这不仅会导致页面加载就发起无效请求，还会触发表单的默认提交行为（普通HTTP POST），这个默认请求的路径大概率不符合API路由规则，从而返回404。

修复方法： #

修改表单的onSubmit绑定，先阻止默认提交行为，再调用handleSubmit：

<form method="POST" onSubmit={(e) => {
  e.preventDefault(); // 阻止表单默认提交逻辑
  handleSubmit();
}}>

或者在handleSubmit函数内部添加阻止默认行为的逻辑（需要接收事件参数）：

const handleSubmit = (e) => { 
  e.preventDefault(); // 新增这一行
  let data = { 
    'name': name, 
    'email': email, 
    'password': password, 
    'confirmPassword': confirmPassword 
  } 
  axios.post('http://myWebsite.test/api/register', data) 
    .then(data => { 
      console.log(data); 
    }).catch(error => { 
      console.log(error); 
    }); 
}

// 表单绑定改为：
<form method="POST" onSubmit={handleSubmit}>

2. 缺少CSRF Token请求头 #

从你提供的cURL请求可以看到，浏览器发送的请求携带了X-XSRF-TOKEN头，但你的Axios请求里没有包含这个头。虽然Laravel默认不对api/*路由做CSRF验证，但如果你的项目配置了全局CSRF拦截，或者前后端域名存在细微差异，就会导致请求被拦截，返回404或419错误。

修复方法： #

配置Axios自动携带CSRF Token：

import axios from 'axios';

// 在组件初始化时或者全局配置（比如App.js）中添加：
axios.defaults.withCredentials = true;
// 从Cookie中获取XSRF-TOKEN并解码
const xsrfToken = document.cookie.split('; ')
  .find(row => row.startsWith('XSRF-TOKEN='))
  ?.split('=')[1];
if (xsrfToken) {
  axios.defaults.headers.common['X-XSRF-TOKEN'] = decodeURIComponent(xsrfToken);
}

3. 确认Laravel路由与服务器重写规则 #

虽然你的api.php路由配置是正确的，但需要额外确认：

• Laravel的.env文件中APP_URL是否配置为http://myWebsite.test
• 服务器（Nginx/Apache）是否正确配置了重写规则，确保所有请求都指向public/index.php。比如Nginx需要包含：

  location / {
      try_files $uri $uri/ /index.php?$query_string;
  }
  

• 确认api路由前缀未被修改：Laravel默认给api.php中的路由添加/api前缀，如果你在RouteServiceProvider里调整了前缀，需要对应修改Axios的请求路径。

4. 配置Axios基础URL简化请求 #

为了避免路径拼写错误，建议给Axios配置基础URL：

axios.defaults.baseURL = 'http://myWebsite.test/api';
// 之后请求可以简化为：
axios.post('/register', data)

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