Vue.js中Axios调用Django API出现401认证错误求助

核心问题分析 #

你的Django视图使用了TokenAuthentication，要求请求必须在请求头中携带有效认证Token，401错误大概率是Axios请求未正确传递Token，或Token已过期/无效导致的。

优先修复Axios认证问题（无需更换API） #

方案1：全局配置Axios认证头（推荐） #

在Vue项目入口文件（如main.js）中设置全局默认请求头，避免每个请求重复配置：

import axios from 'axios'

// 从本地存储或Vuex获取Token，根据你的实际存储方式调整
const authToken = localStorage.getItem('auth_token') || store.state.auth.token
axios.defaults.headers.common['Authorization'] = `Token ${authToken}`

方案2：当前请求手动添加认证头 #

直接修改checkout.vue中的请求代码，手动携带Token：

const data={
    'first_name':this.first_name,
    'last_name':this.last_name,
    'email':this.email, // 注意：你原代码中拼写错误（eamil→email），会导致后端验证失败
    'address':this.address,
    "zipcode":this.zipcode,
    "place":this.place,
    "phone":this.phone,
    "items":items,
    'stripe_token':token.id
}

// 获取认证Token
const authToken = localStorage.getItem('auth_token') || this.$store.state.auth.token

await axios
.post("/api/v1/checkout/", data, {
    headers: {
        'Authorization': `Token ${authToken}`
    }
})
.then(response=>{
    this.$store.commit("clearCart")
    this.$router.push("/cart/success")
})
.catch(error=>{
    this.errors.push("Something went wrong. Please try again")
    console.log(error.response) // 打印完整响应，查看后端返回的具体错误详情
})
this.$store.commit('setIsLoading',false)

替换为Fetch API的实现方案 #

如果一定要更换为Fetch API，核心是同样要正确携带认证头，代码示例：

const data={
    'first_name':this.first_name,
    'last_name':this.last_name,
    'email':this.email, // 修正拼写错误
    'address':this.address,
    "zipcode":this.zipcode,
    "place":this.place,
    "phone":this.phone,
    "items":items,
    'stripe_token':token.id
}

const authToken = localStorage.getItem('auth_token') || this.$store.state.auth.token

try {
    const response = await fetch("/api/v1/checkout/", {
        method: 'POST',
        headers: {
            'Content-Type': 'application/json',
            'Authorization': `Token ${authToken}`
        },
        body: JSON.stringify(data)
    })

    if (!response.ok) {
        throw new Error('请求失败')
    }

    const result = await response.json()
    this.$store.commit("clearCart")
    this.$router.push("/cart/success")
} catch (error) {
    this.errors.push("Something went wrong. Please try again")
    console.log(error)
} finally {
    this.$store.commit('setIsLoading',false)
}

额外排查要点 #

1. Token有效性：在浏览器DevTools的Network面板中，检查请求头的Authorization字段是否正确，确认Token未过期、与后端生成的用户Token一致。
2. Django配置检查：确保项目已启用rest_framework.authtoken应用，且目标用户已生成对应认证Token。
3. 字段拼写错误：原代码中eamil是拼写错误，需修正为email，否则会触发后端序列化器验证失败。

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