React中Axios POST请求返回307内部重定向错误求助

1. Axios POST请求携带不必要的空请求体 #

你的代码中Axios POST请求传递了空对象{}作为请求体，这会让Axios自动设置Content-Type: application/json请求头。而后端的注册接口是基于路径参数设计的，并不期望接收请求体，这种不匹配可能触发307内部重定向。

对比fetch的行为：如果fetch发送POST时不传body参数，默认不会携带请求体，这可能是之前用fetch正常、换Axios后出问题的核心原因。

解决办法：移除Axios POST的第二个参数（空对象），改为：

await axios.post(`http://localhost:3000/register/${this.name}/${this.password}/${this.ID}/${this.phoneNum}/${this.email}/${this.accountNum}/${this.university}/${this.courseName}/${this.dateOfBirth}/${this.area}`)
.then((res) => {
    console.log(res);
})

2. 路径参数未编码导致URL格式错误 #

直接拼接字符串生成URL时，若参数包含特殊字符（比如邮箱的@、日期的/、空格、中文等），会破坏URL的路径结构。Postman会自动对URL参数进行编码，但Axios直接拼接的话不会，这会导致后端路由无法匹配，返回307重定向到预期的路由格式。

解决办法：对每个路径参数使用encodeURIComponent()编码：

// 对所有参数进行URL编码
const params = [
  this.name,
  this.password,
  this.ID,
  this.phoneNum,
  this.email,
  this.accountNum,
  this.university,
  this.courseName,
  this.dateOfBirth,
  this.area
].map(param => encodeURIComponent(param));

const url = `http://localhost:3000/register/${params.join('/')}`;

await axios.post(url)
.then((res) => {
    console.log(res);
})

3. 后端路由的重定向逻辑触发 #

虽然Postman测试正常，但前端请求可能因为某些头部差异（比如Axios默认携带的Accept头与fetch不同），触发后端的重定向规则。可以检查后端注册接口的代码，是否存在针对特定请求头的重定向逻辑，或者是否在处理POST请求时意外触发了GET路由的重定向。

解决办法：

• 查看后端注册控制器的日志，对比Postman请求和前端请求的头部差异，定位触发重定向的条件。
• 确认后端路由是用POST方法定义的（比如Express中的app.post('/register/...', ...)），避免方法不匹配导致的重定向。

4. 跨域配置的潜在问题 #

虽然多数接口正常，但注册接口可能有不同的CORS配置。Axios的跨域处理与fetch存在细微差异，比如是否自动携带Cookie、处理OPTIONS预检请求的方式等，这可能间接触发重定向。

解决办法：

• 检查后端CORS配置，确保注册接口允许POST方法，并且没有在OPTIONS预检请求后返回重定向。
• 尝试在Axios请求中添加withCredentials: true配置（如果后端需要携带Cookie）：

await axios.post(url, { withCredentials: true })
.then((res) => {
    console.log(res);
})

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