【Django跨域】一篇文章彻底解决Django跨域问题！
Django解决跨域
⭐还有人不会用Django配置CORS？
⭐耗时3600秒整理的资料直接拿走！一篇文章彻底解决Django跨域问题！
⭐本文包含以下内容：Django解决跨域问题，Django解决跨域携带Cookie问题等
⭐官方文档：Django-cors-headers ·皮皮 (pypi.org) 最全面的配置推荐大家前往官网学习
- CORS，Cross-Origin Resource Sharing，是一个新的 W3C 标准，它新增的一组HTTP首部字段，允许服务端其声明哪些源站有权限访问哪些资源。换言之，它允许浏览器向声明了 CORS 的跨域服务器，发出 XMLHttpReuest 请求，从而克服 Ajax 只能同源使用的限制。在我们的django框架中就是利用CORS来解决跨域请求的问题。
- CORS详细介绍：跨源资源共享（CORS） - HTTP | MDN (mozilla.org)
基本使用
1.安装依赖
项目主页：adamchainz/django-cors-headers：Django 应用程序，用于处理跨域资源共享 （CORS） 所需的服务器标头 (github.com)
pip install django-cors-headers
2.修改设置
- 修改Django项目文件夹下的 setting.py 文件
# 记得修改允许访问的IP
ALLOWED_HOSTS = ['*'] # 允许全部IP访问项目
# setting.py 修改以下内容
INSTALLED_APPS = [
'django.contrib.admin',
'django.contrib.auth',
'django.contrib.contenttypes',
'django.contrib.sessions',
'django.contrib.messages',
'django.contrib.staticfiles',
'corsheaders', # 注册app corsheaders
'app01',# 你的app
]
MIDDLEWARE = [
'django.middleware.security.SecurityMiddleware',
'django.contrib.sessions.middleware.SessionMiddleware',
'corsheaders.middleware.CorsMiddleware', # 加入中间键 位置必须在这里 不能在其他位置
'django.middleware.common.CommonMiddleware',
# 'django.middleware.csrf.CsrfViewMiddleware', 如果你的项目没有考虑到 csrf 网络攻击,可注释掉,否则会报错没有传递 csrf cookie
'django.contrib.auth.middleware.AuthenticationMiddleware',
'django.contrib.messages.middleware.MessageMiddleware',
'django.middleware.clickjacking.XFrameOptionsMiddleware',
]
# 在 setting.py 末尾添加以下设置
CORS_ALLOW_CREDENTIALS = True
CORS_ALLOW_ALL_ORIGINS = True
CORS_ALLOW_HEADERS = ('*')
- 配置完以上内容后Django就可用跨域访问啦！基本需求就已经解决啦！
- 配置内容详解请向下查看学习！
详细配置
- 以下内容均在 setting.py 中配置
- 下面是一些常用的 全面的需要大家去官方文档查阅
配置允许访问的域名白名单
# 允许所有 域名/IP 跨域
CORS_ALLOW_ALL_ORIGINS = True
# 配置可跨域访问的 域名/IP
CORS_ALLOWED_ORIGINS = [
'127.0.0.1:8000',
'localhost:8080',
'myname.com',
]
# 使用正则表达式匹配允许访问的 域名/IP
CORS_ALLOWED_ORIGIN_REGEXES = [
r"^https://\w+\.example\.com$",
]
配置允许的跨域请求方式
# 配置允许的请求方式
CORS_ALLOW_METHODS = [
'*', # * 表示允许全部请求头
'GET',
'POST',
'PUT',
'PATCH',
'DELETE',
'OPTIONS'
]
配置允许的请求头
CORS_ALLOW_HEADERS = [
"accept",
"accept-encoding",
"authorization",
"content-type",
"dnt",
"origin",
"user-agent",
"x-csrftoken",
"x-requested-with",
]
允许跨域访问Cookie
# 改为True即为可跨域设置Cookie
CORS_ALLOW_CREDENTIALS = True
# 这里有一个需要注意的点
# chrome升级到80版本之后，cookie的SameSite属性默认值由None变为Lax
# 也就是说允许同站点跨域 不同站点需要修改配置为 None（需要将Secure设置为True）
# 需要前端与后端部署在统一服务器下才可进行跨域cookie设置
# 总结：需要设置 samesite = none、secure = True（代表安全环境 需要 localhost 或 HTTPS）才可跨站点设置cookie
Cookie属性
key：键
value：值
max_age：多久后过期，时间为秒，默认为None，临时cookie设置即关闭浏览器就消失
expires：过期时间，具体时间
path：生效路径，默认‘/’
domain：生效的域名，你绑定的域名
secure：HTTPS传输时应设置为true，默认为false
httponly：值应用于http传输，这时JavaScript无法获取
SameSite属性详解
- Lax
- Cookies 允许与顶级导航一起发送，并将与第三方网站发起的 GET 请求一起发送。这是浏览器中的默认值。
- Strict
- Cookies 只会在第一方上下文中发送，不会与第三方网站发起的请求一起发送。
- None
- Cookie 将在所有上下文中发送，即允许跨站发送。
配置的介绍
- **Django版本高于2.1：**直接设置即可
- **如果DJango版本低于2.1：**需要下载 django-cookie-samesite 再设置
- 其他详细Cookie配置内容请参考官方文档：配置 | Django 文档 | Django (djangoproject.com)
# 以下内容均在 setting.py 配置
# 将session属性设置为 secure
SESSION_COOKIE_SECURE = True
# 设置set_cookie的samesite属性
SESSION_COOKIE_SAMESITE = 'None'
SESSION_COOKIE_SAMESITE = 'Lax'
SESSION_COOKIE_SAMESITE = 'Strict'
配置使用CORS的URL
# 配置Django项目中哪些URL使用CORS进行跨域
# 默认为 r'^.*$'，即匹配所有 URL
# 以下案例为 /api/*** 均可进行跨域访问
CORS_URLS_REGEX = r"^/api/.*$"
如果对你有帮助请给我点个赞吧
❤关注我查看更多技术分享文章 Django+Vue 全栈