使用axios.post请求Spring服务端数据返回302错误，React无法处理响应

问题根源 #

你服务端返回的HttpStatus.FOUND对应的就是HTTP 302重定向状态码：

• axios的默认校验规则里，只有2xx范围内的状态码才会判定为请求成功进入.then分支，3xx、4xx、5xx都会进入.catch抛出错误
• 你看到浏览器能拿到响应体是因为浏览器本身会接收302响应的返回内容，但axios的默认拦截逻辑会把非2xx的响应直接判定为失败

解决方法 #

方案1：修改服务端返回状态码（推荐） #

你这个接口是正常返回业务数据的查询接口，应该返回200成功状态码，调整Spring Controller的返回状态即可：

@PostMapping("get_company/all")
public ResponseEntity<?> getAllCompanies() {
    // 把HttpStatus.FOUND替换为HttpStatus.OK
    return new ResponseEntity<>(adminService.getAllCompanies(), HttpStatus.OK);
}

修改后状态码变为200，axios会正常进入.then分支，你可以正常拿到数据赋值给state渲染组件。

方案2：前端调整axios状态码校验规则（不推荐，不符合HTTP规范） #

如果暂时无法修改后端代码，可以在axios请求中添加validateStatus配置，自定义允许通过的状态码：

useEffect(()=>{
  axios.post(myURL, {}, {
    validateStatus: (status) => {
      // 允许2xx、3xx状态码都进入then分支
      return status >= 200 && status < 400;
    }
  }).then((response)=>{
      console.log(response.data);
      setData(response.data);
  }).catch(error=>{console.log(error)});
},[]);

额外注意事项 #

• 该接口是纯数据查询接口，没有提交数据的逻辑，更推荐用GET请求而非POST模拟GET，更符合REST接口规范
• 注意代码里的拼写错误：allComapnies、comapniesData均拼写错误，正确拼写为companies，避免后续引发其他关联问题

内容的提问来源于stack exchange，提问作者גבריאל חי בנישטי