解决跨域访问API失败问题
By：授客 QQ：103355122
实践环境
Win 10
Python 3.5.4
Django-2.0.13.tar.gz
官方下载地址：
https://www.djangoproject.com/download/2.0.13/tarball/
vue 2.5.2
django-cors-headers-3.0.2.tar.gz
下载地址：
https://pypi.org/project/django-cors-headers/#files
问题描述
vue组件中访问django服务端api时，提示以下问题
Access to XMLHttpRequest at “http://localhost:8000/api/v1/sprints/details” from origin “http://localhost:8080” has been blocked by CORS policy: No “Access-Control-Allow-Origin” header is present on the requested resource.
原因分析：跨域访问导致
解决方法
安装django-cores-headers
pip install django-cors-headers
或者通过下载安装包的方式安装
项目settings.py配置
找到INSTALLED_APPS，添加 corsheaders
INSTALLED_APPS = [
…略
“corsheaders”
]
找到MIDDLEWARE,添加 corsheaders.middleware.CorsMiddleware
MIDDLEWARE = [ # Or MIDDLEWARE_CLASSES on Django < 1.10
…略
“corsheaders.middleware.CorsMiddleware”,
“django.middleware.common.CommonMiddleware”,
…略
]
注意：
1、CorsMiddleware尽可能放在上方，特别是会生成response的中间之前，比如 CommonMiddleware 、WhiteNoiseMiddleware，否则不能给这些response添加CORS请求头。
2、如果正在使用CORS_REPLACE_HTTPS_REFERER，django-cors-headers，将其放在CsrfViewMiddleware 之前。
在MIDDLEWARE变量之后添加以下代码
CORS_ALLOW_CREDENTIALS = True
CORS_ORIGIN_ALLOW_ALL = True
必要时还可以再添加CORS_ALLOW_HEADERS变量，设置允许的请求头，如下
CORS_ALLOW_HEADERS = (“authorization”, “Content-Disposition”)
也可以写成如下，允许所有请起头（不过实践时发现，有时候似乎不起作用，需要指定具体的请求头）
CORS_ALLOW_HEADERS = (“*”)
实践发现，给POST请求添加X-CSRFTOKEN请求头时，需要在CORS_ALLOW_HEADERS中设置x-csrftoken请求头，如下：
CORS_ALLOW_HEADERS = (“x-csrftoken”, “authorization”, “content-type”)
不然会报类似以下错误：
Access to XMLHttpRequest at “http://localhost:8000/api/v1/sys-user/userinfo” from origin “http://localhost:8080” has been blocked by CORS policy: Request header field authorization is not allowed by Access-Control-Allow-Headers in preflight response.
参考链接
https://github.com/ottoyiu/django-cors-headers
转载请注明原文链接：Django 解决跨域访问API失败问题
