使用React+Axios向Django服务器发POST请求遇302重定向问题

嘿，我之前也踩过Django+React用Axios发POST返回302的坑，给你几个实用的排查和解决方向：

1. 先确认CSRF Cookie名称是否匹配 #

Django默认的CSRF Cookie名称是csrftoken，但你设置的xsrfCookieName是XCSRF-Token，这大概率是不匹配的！先把Axios的配置改成和Django默认一致：

axios.defaults.xsrfCookieName = "csrftoken";
axios.defaults.xsrfHeaderName = "X-CSRFToken";

你可以打开浏览器开发者工具的「Application → Cookies」，看看Django实际返回的Cookie名称是不是csrftoken，别搞混了。

2. 检查请求是否真的带上了CSRF Header #

打开Network面板，查看POST请求的Request Headers里有没有X-CSRFToken字段，值是否和Cookie里的csrftoken一致。如果没带上，大概率是跨域场景下没开启凭证携带：

• 全局配置Axios携带凭证：

  axios.defaults.withCredentials = true;
  

• 或者单个请求配置：

  axios.post('/your-api-endpoint', yourData, { withCredentials: true })
  

3. 核对Django的CSRF与CORS配置 #

• 确保settings.py里django.middleware.csrf.CsrfViewMiddleware在中间件列表中，且位置在SessionMiddleware之后；
• 如果是跨域请求，用了django-cors-headers的话，要保证：

  CORS_ALLOW_CREDENTIALS = True
  CSRF_TRUSTED_ORIGINS = ['http://localhost:3000'] # 替换成你的React前端域名
  

4. 302可能是未登录导致的重定向 #

如果你的Django视图加了@login_required装饰器，或者属于需要登录的路由，而请求没带上登录Session Cookie，Django会自动返回302重定向到登录页。这时候要确认：

• 用户已经在前端登录，且请求携带了Session Cookie（同样需要withCredentials: true）；
• 或者该API视图不需要登录权限，暂时去掉@login_required测试。

5. 手动获取CSRF Token兜底 #

如果Axios自动读取Cookie有问题，可以手动从Cookie里提取Token再添加到请求头：

function getCookie(name) {
    let cookieValue = null;
    if (document.cookie && document.cookie !== '') {
        const cookies = document.cookie.split(';');
        for (let i = 0; i < cookies.length; i++) {
            const cookie = cookies[i].trim();
            if (cookie.substring(0, name.length + 1) === (name + '=')) {
                cookieValue = decodeURIComponent(cookie.substring(name.length + 1));
                break;
            }
        }
    }
    return cookieValue;
}
const csrftoken = getCookie('csrftoken');
axios.post('/your-api-endpoint', yourData, {
    headers: { 'X-CSRFToken': csrftoken },
    withCredentials: true
});

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