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)

1
pip install django-cors-headers

2.修改设置

  • 修改Django项目文件夹下的 setting.py 文件
1
2
# 记得修改允许访问的IP
ALLOWED_HOSTS = ['*'] # 允许全部IP访问项目
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
# 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',
]
1
2
3
4
# 在 setting.py 末尾添加以下设置
CORS_ALLOW_CREDENTIALS = True
CORS_ALLOW_ALL_ORIGINS = True
CORS_ALLOW_HEADERS = ('*')
  • 配置完以上内容后Django就可用跨域访问啦！基本需求就已经解决啦！
  • 配置内容详解请向下查看学习！

详细配置

  • 以下内容均在 setting.py 中配置
  • 下面是一些常用的 全面的需要大家去官方文档查阅

配置允许访问的域名白名单

1
2
3
4
5
6
7
8
9
10
11
12
# 允许所有 域名/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$",
]

配置允许的跨域请求方式

1
2
3
4
5
6
7
8
9
# 配置允许的请求方式
CORS_ALLOW_METHODS = [
    'GET',
    'POST',
    'PUT',
    'PATCH',
    'DELETE',
    'OPTIONS'
]

配置允许的请求头

1
2
3
4
5
6
7
8
9
10
11
12
CORS_ALLOW_HEADERS = [
	"*", # * 表示允许全部请求头
    "accept",
    "accept-encoding",
    "authorization",
    "content-type",
    "dnt",
    "origin",
    "user-agent",
    "x-csrftoken",
    "x-requested-with",
]

允许跨域访问Cookie

1
2
3
4
5
6
7
8
9
# 改为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 将在所有上下文中发送，即允许跨站发送。

配置的介绍

1
2
3
4
5
6
7
8
9
# 以下内容均在 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

1
2
3
4
5
# 配置Django项目中哪些URL使用CORS进行跨域
# 默认为 r'^.*$'，即匹配所有 URL

# 以下案例为 /api/*** 均可进行跨域访问
CORS_URLS_REGEX = r"^/api/.*$"

👍如果对你有帮助请给我点个赞吧

❤关注我查看更多技术分享文章 Django+Vue 全栈