解決跨域訪問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