【记录】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 = ('*')

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

相关推荐
秋天的一阵风24 分钟前
Vue 3 里被严重低估的 API:InjectionKey
前端·javascript·vue.js
徐小夕16 小时前
万字拆解 JitWord:企业级实时协同文档底层架构 + 大模型 AI 融合完整实践
前端·vue.js·github
学测绘的小杨16 小时前
CompassFusion:一个从 GNSS 到 GNSS/INS 组合导航的独立工程包
python
用户831348593069817 小时前
Cesium实现雾气效果:按钮一键控制打开/关闭雾气效果,滑块拖动实时控制雾气浓度
vue.js·cesium
锋行天下19 小时前
如何用Vite实现Vue组件的按需打包和远程加载
前端·vue.js·前端框架
用户9004633704020 小时前
用Gemini搞定Vue报错和语法异常的问题
vue.js
zzzzzz3101 天前
当产品经理说这个很简单:我用Python自动化处理奇葩需求的实战指南
python·pycharm·产品经理
小兔崽子去哪了1 天前
Vue3 + Pinia 集成 IGV.js 实现 BAM 文件在线浏览
javascript·vue.js·后端
雪隐1 天前
个人电脑玩AI-06让5060 Ti给你打工——不光能画画,Qwen3-TTS还能学人说话,连我老板都信了!
人工智能·后端·python
兵慌码乱1 天前
面向桌面端的资产管理系统分层架构设计与核心模块实现
python·系统架构·sqlite·pyqt5·数据库设计·桌面应用开发·mvc架构