Vue.js调用登录API发送POST请求时出现403 Forbidden错误求助

针对你遇到的403 Forbidden错误，结合代码和配置，以下是可能的原因及对应解决方法：

1. CSRF Cookie域名配置不匹配 #

你的API域名是apibackup.example.com，但settings.py中CSRF_COOKIE_DOMAIN设置为example.com，这会导致子域名无法读取CSRF Cookie。Django中要让子域名共享Cookie，域名需以.开头：

# settings.py
CSRF_COOKIE_DOMAIN = '.example.com'  # 允许所有example.com的子域名访问该Cookie

2. Axios的CSRF Token头与Django预期不符 #

Axios默认读取XSRF-TOKEN Cookie并设置X-XSRF-TOKEN请求头，但Django的CSRF中间件期望的是X-CSRFToken头，且读取的Cookie名为csrftoken。需要调整axios配置：

// 全局配置（推荐，所有请求生效）
axios.defaults.xsrfCookieName = 'csrftoken';
axios.defaults.xsrfHeaderName = 'X-CSRFToken';

// 或者单个登录请求中配置
const response = await axios.post(
    'https://apibackup.example.com/api/login/',
    {
        username: email.value,
        password: password.value
    },
    {
        headers: {
            'Content-Type': 'application/json'
        },
        withCredentials: true,
        xsrfCookieName: 'csrftoken',
        xsrfHeaderName: 'X-CSRFToken'
    }
)

3. 确保前端提前获取CSRF Cookie #

在发送登录POST请求前，前端需要先触发Django设置CSRF Cookie。可先发送一个无副作用的GET请求到API端点（比如/api/csrf/）：

// 先获取CSRF Cookie
await axios.get('https://apibackup.example.com/api/csrf/', { withCredentials: true });
// 再发送登录请求
const response = await axios.post(/* ... 登录请求配置 ... */);

4. 检查Django中间件顺序 #

确认settings.py的中间件列表中，CsrfViewMiddleware的顺序正确：

MIDDLEWARE = [
    'django.middleware.security.SecurityMiddleware',
    'django.contrib.sessions.middleware.SessionMiddleware',
    'django.middleware.common.CommonMiddleware',
    'django.middleware.csrf.CsrfViewMiddleware',  # 必须在SessionMiddleware之后
    'django.contrib.auth.middleware.AuthenticationMiddleware',
    # 其他中间件...
]

5. 临时测试：CSRF豁免（不推荐生产环境） #

如果以上方法都无效，可临时给登录视图添加@csrf_exempt装饰器排除CSRF检查（仅用于排查问题，生产环境禁用）：

from django.views.decorators.csrf import csrf_exempt

@csrf_exempt
def login_view(request):
    # 原视图代码

内容的提问来源于stack exchange，提问作者Halil İbrahim