Django+Vue项目axios POST请求403及CORS跨域错误如何解决

报错1：Forbidden (CSRF cookie not set.) 403错误 #

原因说明 #

Django默认开启CSRF防护中间件，所有POST请求默认需要携带CSRF Token校验。之前的项目未出现该报错通常是两种情况：要么项目未启用django.middleware.csrf.CsrfViewMiddleware中间件，要么用了Django REST Framework(DRF)的非Session类认证（如JWT），DRF默认对这类请求豁免CSRF校验。

解决方案 #

• 若项目为前后端分离架构，不使用Session登录验证，可直接给对应视图添加CSRF豁免装饰器：
  导入模块from django.views.decorators.csrf import csrf_exempt，在视图函数上添加@csrf_exempt装饰器即可。
• 若需要保留CSRF校验，前端做如下配置：
  1. 给axios全局开启携带Cookie：axios.defaults.withCredentials = true
  2. 从Cookie中读取csrftoken值，添加到axios全局请求头：

     import Cookies from 'js-cookie'
     axios.defaults.headers.common['X-CSRFToken'] = Cookies.get('csrftoken')
     

报错2：添加@api_view(['POST'])后出现跨域校验错误 #

原因说明 #

该报错是浏览器同源策略的跨域限制，前后端服务端口/域名/协议不一致就会触发。添加@api_view后请求由DRF处理，会先触发OPTIONS预检请求，之前CSRF报错阶段请求未走到跨域校验逻辑，因此调整后才出现该报错。

解决方案 #

1. 安装Django跨域处理包：
   pip install django-cors-headers
2. 修改settings.py配置：
   • 在INSTALLED_APPS中新增条目：corsheaders
   • 在MIDDLEWARE列表最顶部新增中间件（必须放在django.middleware.common.CommonMiddleware之前）：corsheaders.middleware.CorsMiddleware
   • 新增跨域相关配置：

     # 开发环境可开启允许所有源，生产环境替换为前端实际地址，例如CORS_ALLOWED_ORIGINS = ["http://localhost:5173"]
     CORS_ALLOW_ALL_ORIGINS = True
     # 允许请求携带Cookie，需要CSRF/Session校验时必须开启
     CORS_ALLOW_CREDENTIALS = True
     

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