django rest jwt vue 跨域问题

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页分别打开百度和谷歌页面时，百度发起一个脚本执行，此时浏览器会检查该脚本属于哪一个页面。即检查是否同源。只有和百度同源的脚本才会被执行。若非同源，在请求数据时，浏览器会在控制台报一个异常。提示拒绝访问。

解决方法:

1. 安装django-cors-headers

pip install django-cors-headers

2. 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",
)