若依自定义后端接口404踩坑记录

博主在后端自定义了接口：

java 复制代码

@PostMapping("/upload")
    public AjaxResult upload(@RequestPart("file") MultipartFile file,
                             @RequestParam("studentId") String studentId,
                             @RequestParam("thesisTitle") String thesisTitle,
                             @RequestParam("thesisKeywords") String thesisKeywords) {
        try {
            TbThesis thesis = new TbThesis();

            thesis.setThesisTitle(thesisTitle);
            thesis.setThesisKeywords(thesisKeywords);
            thesis.setStudentId(studentId);
            String url = tbThesisService.uploadThesis(file, thesis);


            Map<String, String> data = new java.util.HashMap<>();
            data.put("url", url);
            return AjaxResult.success("上传成功", data);
        } catch (Exception e) {
            return AjaxResult.error(e.getMessage());
        }
    }

但是前端调用ajax请求却报错404，经过仔细排查，发现是因为在 RuoYi-Vue 的前端工程里，"裸" ajax（axios） 404、跨域、认证失败、统一错误处理全都没有了。不经过vite转发不会到后端8080端口。

应当在api/system目录下注册js代码

javascript 复制代码

import request from '@/utils/request'

export function uploadThesis(data) {
  return request({
    url: '/system/thesis/upload',
    method: 'post',
    data,
    headers: { 'Content-Type': 'multipart/form-data' }
  })
}

然后，前端页面直接调用封装方法：

javascript 复制代码

const fd = new FormData()
  fd.append('file', file.value)
  fd.append('thesisTitle', form.thesisTitle)
  fd.append('thesisKeywords', form.thesisKeywords)
  fd.append('studentId', form.studentId)

  loading.value = true
  try {
    const { msg } = await uploadThesis(fd)   // 2. 直接调用封装方法
    ElMessage.success(msg || '上传成功')
    // 成功后重置
    uploadRef.value.clearFiles()
    Object.assign(form, {
      thesisTitle: '',
      thesisKeywords: '',
      studentId: ''
    })
  } catch (e) {
    ElMessage.error(e.msg || '上传失败')
  } finally {
    loading.value = false
  }
}