【记录】Django解决与VUE跨域问题

1 梗概

这里记录Django与VUE的跨域问题解决方法,主要修改内容是在 Django 中。当然其他的前端项目 Django 也可以这样处理。

2 安装辅助包

复制代码
pip install django-cors-headers

3 配置 settings.py

INSTALLED_APPS = [

...

'corsheaders',

...

]

为了响应头的处理,更新MIDDLEWARE设置,确保CorsMiddleware位于适当的位置:

MIDDLEWARE = [

确保CorsMiddleware放置在可以生成响应的中间件之前,例如CommonMiddleware之前。

'corsheaders.middleware.CorsMiddleware',

'django.middleware.common.CommonMiddleware',

其他中间件...

同时可注释掉

'django.middleware.csrf.CsrfViewMiddleware',

]

可以通过设置CORS_ALLOWED_ORIGINS来指定哪些域被允许访问你的API:

CORS_ALLOWED_ORIGINS = [

"http://example.com",

"https://another-example.com",

]

若在开发阶段希望允许任何源,可以暂时设置为:

CORS_ALLOW_ALL_ORIGINS = True

开发过程中 可在settings.py 中增加下面的内容,

复制代码
CORS_ALLOW_CREDENTIALS = True
CORS_ALLOW_ALL_ORIGINS = True
CORS_ALLOW_HEADERS = ('*')

【注】在生产环境中应该明确限制来源以增强安全性

相关推荐
小爬的老粉丝9 分钟前
Vue 3 文件预览生产排障:Worker/WASM 404、鉴权 Blob 与子路径
javascript·vue.js·wasm
布兰妮甜1 小时前
Vue 状态管理选型:Pinia 完整实战,对比 Vuex,模块化持久化
前端·javascript·vue.js·pinia·vuex
天天爱吃肉82181 小时前
【重磅发布:拿下新超仁达代理权 】
大数据·人工智能·python·功能测试·汽车
神王宝宝 王者小学1 小时前
面向领域驱动架构的查询实现方式
前端·python·架构
小锋java12342 小时前
【技术专题】Vue3 - 条件渲染
vue.js·vite
ningmengjing_3 小时前
Redis 从入门到实战:Python操作全攻略
数据库·redis·python
️学习的小王3 小时前
智能文档助手:基于RAG的本地化文档问答系统实战指南
人工智能·python·机器学习
不瘦80斤不改名3 小时前
05-vibe-coding-向agentic-engineering演进
人工智能·笔记·python·prompt
笨鸟先飞,勤能补拙3 小时前
AI 安全的下一个 5 年:从 Agent 到 AGI 的攻防博弈
人工智能·python·安全·web安全·网络安全·github·agi