React对接SpringBoot API上传文件时Axios网络错误求助

我用React应用向SpringBoot API端点上传文件时，碰到Axios Network Error，每次尝试上传时App.js都会重渲染，文件最终需存入mongodb。已参考多篇教程调整URL调用与FormData格式，但仍无法定位问题，希望得到帮助。

错误信息 #

network error
AxiosError:Network Error at XMLHttpRequest.handleError (http://localhost:3000/static/js/bundle.js:52506:14)

React API调用代码 #

import api from "../../api/axiosConfig";
//my axios import which contains base url + headers

const uploadHandler = async () => {
  const formData = new FormData();
  if (!image) {
    console.log('No file selected');
    return;
  }
  try {
    formData.append('image', image);
    for (const value of formData.values()) {
      console.log(value);
    }
    const response = api.post('/photos/add/' + employeeEmail + '/' + month + '/' + year, formData);
    //api here is the base url
    console.log(response);
  } catch (err) {
    console.error(err);
  }
};

Axios配置文件 #

import axios from 'axios';

export default axios.create({
    baseURL: 'http://localhost:8080',
    headers: {"ngrok-skip-browser-warning": "true"}
});

SpringBoot控制器代码 #

@Autowired
PhotoService photoService;

@PostMapping("/photos/add/{employeeEmail}/{month}/{year}")
public ResponseEntity<Photo> addPhoto(@PathVariable("employeeEmail") String employeeEmail, @PathVariable String month, @PathVariable String year, @RequestParam("image") MultipartFile image) throws IOException {
  return new ResponseEntity<Photo>(photoService.addPhoto(employeeEmail, month, year, image), HttpStatus.CREATED);
}

排查与解决步骤 #

1. 修复异步请求处理 #

原代码中api.post未加await，导致返回的是Promise对象，无法正确获取响应，同时可能引发后续逻辑异常。修改如下：

const response = await api.post('/photos/add/' + employeeEmail + '/' + month + '/' + year, formData);

2. 阻止页面默认重渲染 #

如果uploadHandler绑定在表单的onSubmit事件上，必须调用preventDefault()阻止浏览器默认提交行为，否则页面会刷新重渲染：

const uploadHandler = async (e) => {
  e.preventDefault(); // 新增这行阻止默认刷新
  // 后续原有代码...
};

3. 解决跨域问题 #

SpringBoot后端未配置跨域时，浏览器会拦截跨域请求。在控制器类或方法上添加@CrossOrigin注解：

@CrossOrigin(origins = "http://localhost:3000") // 指定React应用地址
@PostMapping("/photos/add/{employeeEmail}/{month}/{year}")
public ResponseEntity<Photo> addPhoto(...) throws IOException {
  // 原有代码...
}

4. 避免手动设置Content-Type #

上传FormData时，Axios会自动设置正确的Content-Type: multipart/form-data并添加boundary参数，手动设置反而会导致请求格式错误，确保Axios配置中没有手动添加该头。

5. 处理路径变量特殊字符 #

如果employeeEmail包含@这类特殊字符，直接拼接在URL中可能导致解析错误，建议对路径变量进行URL编码：

const encodedEmail = encodeURIComponent(employeeEmail);
const response = await api.post(`/photos/add/${encodedEmail}/${month}/${year}`, formData);

6. 配置SpringBoot文件上传参数 #

确保SpringBoot允许足够大小的文件上传，在application.properties中添加：

spring.servlet.multipart.max-file-size=10MB
spring.servlet.multipart.max-request-size=10MB

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