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

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

相关推荐
倒流时光三十年21 分钟前
第三阶段 26 · highlight 高亮(返回命中片段)
后端·python·django
java1234_小锋28 分钟前
Vue3+Vite简介以及构建第一个HelloWorld实例
前端·javascript·vue.js·vite
久久学姐2 小时前
Python+Playwright+Pytest+BDD,用FSM打造高效测试框架
python·pytest·bdd·playwright·fsm
黑桃小柒72 小时前
Django模型关系:从一对多到多对多全解析
数据库·django·sqlite
西门啐血2 小时前
Vue 缓存之坑,变量赋值方式和响应式数据
前端·vue.js·缓存
Zane19943 小时前
闭包到底"闭"住了什么?一文讲透 LEGB 规则与循环里的闭包陷阱
后端·python
Lumi_Peak3 小时前
Claude思考了42秒,我的代码质量直接提升了一个档次
python·claude
观察员3 小时前
Vue3 猜字游戏前端实战:从零搭建聊天交互界面
vue.js
m沐沐3 小时前
【机器学习】DBSCAN聚类算法——原理、参数调优与实战
人工智能·python·深度学习·算法·机器学习·聚类·dbscan
梅孔立4 小时前
推荐一个 Python 开源项目:AI 模板填充 + Markdown 转 Word,面向 Aspose 模板引擎的效率神器
人工智能·python·开源