装了django-cors-headers仍报“No 'Access-Control-Allow-Origin' header”是因为CorsMiddleware位置错误(须在SessionMiddleware之后、CommonMiddleware之前)、CORS_ALLOW_ALL_ORIGINS=True未正确配置(旧版CORS_ORIGIN_ALLOW_ALL已弃用),或未设CORS_ALLOW_CREDENTIALS=True(前端带cookie时必需)。
直接用 django-cors-headers 就行,但顺序、参数和调试方式错一个,前端照样收不到响应头。
为什么装了 django-cors-headers 还报 No 'Access-Control-Allow-Origin' header?
根本不是没装,而是中间件位置错了,或者没配关键参数。浏览器看到 OPTIONS 预检请求返回 200 但没带 Access-Control-Allow-Origin,说明 CorsMiddleware 根本没生效。
-
CorsMiddleware必须放在SessionMiddleware之后、CommonMiddleware之前 —— 放错位置会导致它被跳过 -
CORS_ALLOW_ALL_ORIGINS = True是当前版本(4.0+)的推荐写法,CORS_ORIGIN_ALLOW_ALL = True已弃用,设了也无效 - 如果前端带 cookie(比如
withCredentials: true),必须同时设CORS_ALLOW_CREDENTIALS = True,否则浏览器直接拒绝响应 -
ALLOWED_HOSTS和 CORS 没关系,但若设成['*']而DEBUG = False,Django 会直接拒掉所有请求,连预检都进不来
CORS_ALLOWED_ORIGINS 白名单怎么写才不踩坑?
开发时用 CORS_ALLOW_ALL_ORIGINS = True 最省事;上线必须关掉,换白名单。注意格式细节:
- 协议、域名、端口都要写全,比如
'http://localhost:3000'、'https://admin.example.com'—— 少个http://或端口就匹配失败 - 不能写
'localhost:3000'(缺协议)或'http://localhost'(缺端口,而 Vue 默认是 3000) - 支持正则:用
CORS_ALLOWED_ORIGIN_REGEXES = [r'^https?://(localhost|127\.0\.0\.1):[0-9]+$']更灵活,但别滥用,正则写错会静默失效 - 如果后端 API 路径本身带前缀(如
/api/v1/),白名单不用体现这个路径,只管来源域名
OPTIONS 预检失败或 405 Method Not Allowed 怎么查?
前端发 POST/PUT 带自定义 header 时,浏览器先发 OPTIONS。失败通常不是 CORS 配置问题,而是路由或视图没处理 OPTIONS 方法。
Python 3.14.3
微软官方的 Python 扩展,是 VS Code 安装量最高的扩展(209M+)。集成 IntelliSense(通过 Pylance)、调试(通过 Python Debugger)、代码检查、格式化、重构和单元测试等功能。支持 Jupyter Notebook、虚拟环境管理和多 Python 版本切换。
- 确保 URL 路由真实存在,且对应视图能响应 OPTIONS —— DRF 的
APIView默认支持,但普通函数视图要手动加@csrf_exempt并 return 空 response -
CORS_ALLOW_HEADERS必须包含前端实际发送的 header,比如'Authorization'、'X-Requested-With',不能只写'*'(新版已不支持通配符) - 检查是否误开了
CSRF_COOKIE_SECURE或SESSION_COOKIE_SECURE却在 HTTP 环境下测试,导致 cookie 不下发,进而影响凭证类跨域 - 用 curl 模拟预检:
curl -I -X OPTIONS http://127.0.0.1:8000/api/login/ -H "Origin: http://localhost:3000",看响应头有没有Access-Control-Allow-Origin
为什么本地开发用 django-cors-headers,上线却推荐 Nginx 反向代理?
不是不能用,而是生产环境绕过 Django 中间件更稳、更快,还能统一处理 SSL、缓存、限流。
-
django-cors-headers是 Python 层拦截,每次请求都走一遍中间件逻辑;Nginx 是 C 层转发,零 Python 开销 - 某些云厂商(如阿里云 SLB)会吞掉
Access-Control-Allow-Origin响应头,你加了也没用;Nginx 在入口处就补上,更可靠 - Vue 开发服务器(
vue-cli-service serve)自带 proxy 配置,开发阶段完全不用动后端,vue.config.js里加devServer.proxy即可 - 真正要警惕的是:把
CORS_ALLOW_ALL_ORIGINS = True提交到 git 并部署上线 —— 这等于公开接口给任意网站调用,连 Referer 都不校验
最常被忽略的一点:浏览器开发者工具 Network 面板里,要点击具体请求 → Headers → Response,才能确认 Access-Control-Allow-Origin 是否真的返回了;光看 Preview 或 Response body 完全没用。