django rest jwt vue 跨域问题
关于JWT 请参考:JSON Web Token 入门教程 - 阮一峰的网络日志
跨域报错信息:
Failed to load http://127.0.0.1:8200/api/jwt-auth/: No 'Access-Control-Allow-Origin' header is present on the requested resource. Origin 'http://localhost:9528' is therefore not allowed access.
跨域:
简单来说就是 A 网站的 javascript 代码试图访问 B 网站,包括提交内容和获取内容。这显然是不安全的。为此,浏览器的鼻祖:网景(Netscape)公司提出了优秀的解决方案:著名的浏览器同源策略。现在所有支持JavaScript的浏览器都会使用这个策略。
同源:
域名、协议、端口均相同的网站即为同源。
流程:
当一个浏览器的两个Tab页分别打开百度和谷歌页面时,百度发起一个脚本执行,此时浏览器会检查该脚本属于哪个页面。即检查是否同源。只有和百度同源的脚本才会被执行。若非同源,在请求数据时,浏览器会在控制台报一个异常。提示拒绝访问。
解决方法:
- 安装django-cors-headers
pip install django-cors-headers
- settings.py配置
INSTALLED_APPS = [
...
"corsheaders",
...
]
MIDDLEWARE_CLASSES = (
...
"corsheaders.middleware.CorsMiddleware",
"django.middleware.common.CommonMiddleware", # 注意顺序
...
)
# 跨域增加忽略
CORS_ALLOW_CREDENTIALS = True
CORS_ORIGIN_ALLOW_ALL = True
CORS_ORIGIN_WHITELIST = (
"*"
)
CORS_ALLOW_METHODS = (
"DELETE",
"GET",
"OPTIONS",
"PATCH",
"POST",
"PUT",
"VIEW",
)
CORS_ALLOW_HEADERS = (
"XMLHttpRequest",
"X_FILENAME",
"accept-encoding",
"authorization",
"content-type",
"dnt",
"origin",
"user-agent",
"x-csrftoken",
"x-requested-with",
)