Django+React跨域问题：Axios请求提示需Access-Control-Allow-Credentials为true

一、后端Django配置的语法错误 #

你的settings里存在两处语法错误，直接导致CORS_ALLOW_CREDENTIALS配置未生效：

1. 赋值符号错误：Django配置使用等号=而非冒号:，将CORS_ALLOW_CREDENTIALS: True改为：

   CORS_ALLOW_CREDENTIALS = True
   

2. 多余逗号：CSRF_COOKIE_SECURE = False, 末尾的逗号会引发语法错误，修改为：

   CSRF_COOKIE_SECURE = False
   

修正后的完整CORS相关配置示例：

INSTALLED_APPS = [
    ...
    'app',
    'corsheaders',
    'rest_framework',
    ...
]
MIDDLEWARE = [
    ...
    'corsheaders.middleware.CorsMiddleware',
    'django.middleware.common.CommonMiddleware',
    ...
]
CORS_ALLOW_CREDENTIALS = True
CSRF_COOKIE_SECURE = False
CORS_ORIGIN_ALLOW_ALL = False
CORS_ALLOWED_ORIGINS = [
    'http://127.0.0.1:3000',
    'http://127.0.0.1:8000',
    'http://localhost:3000',
    'http://localhost:8000',
]

二、前端Axios设置 #

你已经在请求中添加了withCredentials: true，这是正确的。如果需要全局生效，可在Axios初始化时统一配置：

import axios from 'axios';
axios.defaults.withCredentials = true;

三、CSRF Token处理 #

发送带凭证的POST请求时，Django的CSRF保护会要求请求携带CSRF Token，否则可能触发权限错误：

1. 后端配置：确保CSRF_COOKIE_HTTPONLY = False（默认可能为True），让前端可以读取CSRF Cookie：

   CSRF_COOKIE_HTTPONLY = False
   

2. 前端获取并携带Token：

   // 封装获取CSRF Token的函数
   function getCsrfToken() {
     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.startsWith('csrftoken=')) {
           cookieValue = decodeURIComponent(cookie.substring('csrftoken='.length));
           break;
         }
       }
     }
     return cookieValue;
   }
   
   // 发送请求时添加Token到请求头
   axios.post(`http://localhost:8000/login/`, request, {
     withCredentials: true,
     headers: {
       'X-CSRFToken': getCsrfToken()
     }
   })
   .then(({ data }) => {
     if (data.warning) return;
     localStorage.setItem("currentUser", data.user);
   });
   

也可以使用Axios拦截器自动添加，避免重复编写：

axios.interceptors.request.use(config => {
  const csrfToken = getCsrfToken();
  if (csrfToken) {
    config.headers['X-CSRFToken'] = csrfToken;
  }
  return config;
});

验证步骤 #

1. 重启Django服务，确保配置生效
2. 清除浏览器缓存后重新发起请求，查看CORS错误是否消失

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