React中Axios.post请求登录接口出现404错误求助

你的核心问题是Axios.post调用方式错误，导致请求路径被错误解析。从报错信息里的Cannot POST /[object%20Object]可以看出，Axios把你传入的配置对象当成了URL参数，才生成了这种异常路径。

错误原因 #

Axios的post方法标准调用格式是：

axios.post(url, data, config)

但你直接把配置对象作为第一个参数传给了axios.post，这不符合它的方法签名，导致URL解析错误。

修正代码 #

你可以选择两种正确写法：

方式1：按参数顺序传递（推荐）

const login = async () => {
    console.log(email, password)
    const res = await axios.post(
        `http://127.0.0.1:3000/users/login`,
        { email, password }
    )
    console.log(res)
}

方式2：使用axios.request传入配置对象

如果习惯用配置对象的形式，应该调用axios.request而非axios.post：

const login = async () => {
    console.log(email, password)
    const res = await axios.request({
        method: "POST",
        url: `http://127.0.0.1:3000/users/login`,
        data: { email, password }
    })
    console.log(res)
}

额外排查点 #

修正后如果仍有问题，检查以下内容：

• 确认后端服务在127.0.0.1:3000正常运行，且/users/login接口已正确定义并支持POST请求
• 若前端和后端端口不同，检查后端是否配置了CORS跨域支持
• 确认请求的Content-Type（Axios默认是application/json）与后端接口要求一致

内容的提问来源于stack exchange，提问作者אליסף מולאי