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

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

相关推荐
gnip3 小时前
企业级配置式表单组件封装
前端·javascript·vue.js
databook9 小时前
Manim实现闪光轨迹特效
后端·python·动效
Juchecar10 小时前
解惑:NumPy 中 ndarray.ndim 到底是什么?
python
用户83562907805110 小时前
Python 删除 Excel 工作表中的空白行列
后端·python
Json_10 小时前
使用python-fastApi框架开发一个学校宿舍管理系统-前后端分离项目
后端·python·fastapi
王王碎冰冰10 小时前
基于 Vue3@3.5+跟Ant Design of Vue 的二次封装的 Form跟搜索Table
前端·vue.js
天蓝色的鱼鱼11 小时前
Element UI 2.X 主题定制完整指南:解决官方工具失效的实战方案
前端·vue.js
我是日安12 小时前
从零到一打造 Vue3 响应式系统 Day 8 - Effect:深入剖析嵌套 effect
前端·vue.js
DevUI团队12 小时前
🚀 MateChat V1.8.0 震撼发布!对话卡片可视化升级,对话体验全面进化~
前端·vue.js·人工智能
好好好明天会更好12 小时前
pinia从定义到运用
前端·vue.js