Django 解決跨域訪問API失敗問題

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

https://files.pythonhosted.org/packages/6b/17/bdd7e2610d5c5b36194524926e4b00abc7113f968d4614c4ff98f2d74737/django-cors-headers-3.0.2.tar.gz

 

問題描述

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',

...略

]

 

注意：

一、CorsMiddleware儘量放在上方，特別是會生成response的中間以前，好比 CommonMiddleware 、WhiteNoiseMiddleware，不然不能給這些response添加CORS請求頭。

二、若是正在使用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