Axios配置baseURL后图片上传请求地址错误返回404如何解决

问题修复方案 #

核心错误点 #

你出现URL请求地址错误是两个问题导致的：

1. 没有使用你自定义配置了baseURL的Axios实例：你已经创建了绑定后端地址http://localhost:8800/api的axiosInstance，但实际发请求时调用的是全局axios.post，全局axios没有配置baseURL，默认会请求当前前端服务的地址localhost:3001。
2. 请求路径缺失路由前缀：后端用户相关路由统一挂载在/api/users前缀下，你写的请求路径profilePicture缺少了/users前缀，就算用上自定义实例也会404。

修复后的代码 #

修改agent.ts里的uploadProfilePicture方法即可：

// app user-related requests 
const AppUser = {
    // 修复后的上传方法
    uploadProfilePicture: (image: Blob) => {
        const formData = new FormData()
        formData.append("image", image)
        // 替换全局axios为自定义实例，路径补全/users前缀
        return axiosInstance.post<Image>("/users/profilePicture", formData, {
                headers: { "Content-type": "multipart/form-data" },
        })
    },
    // 其他请求保持不变...
}

可选排查项 #

如果修改后仍然报错，可以依次检查以下内容：

• 确认Express后端已经正常启动在8800端口，没有端口占用
• 确认后端配置了CORS跨域规则，允许来自http://localhost:3001的请求
• 检查前端是否配置了本地代理，确认代理规则没有错误拦截请求

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