Django後端完全解決跨域問題

最近在接一個先後端分離的項目，後端使用的django-restframework，前端使用的Vue。後端跑起來後，發現前端在訪問後端API時出了了跨域的問題。

相似以下報錯：

關於跨域問題，以前這篇文章也提到過1、先後端交互之Ajax及跨域問題，當時裏面是使用的jsonp方式，可是jsonp只支持GET方法，不能全面支持跨域。

這裏主要學習一下經過後端解決跨域問題的方法，其實前端也有解決跨域的方法，後面學習到了再寫一個文章記錄。

 

django後端解決跨域方式一Middleware

中間介實現跨域過程

一、新建中間介包

#mkidr middleware

#touch middleware/__init.py__

#vim middleware/crossdomainxhr.py

from django import http try: from django.conf import settings XS_SHARING_ALLOWED_ORIGINS = settings.XS_SHARING_ALLOWED_ORIGINS XS_SHARING_ALLOWED_METHODS = settings.XS_SHARING_ALLOWED_METHODS XS_SHARING_ALLOWED_HEADERS = settings.XS_SHARING_ALLOWED_HEADERS XS_SHARING_ALLOWED_CREDENTIALS = settings.XS_SHARING_ALLOWED_CREDENTIALS except AttributeError: XS_SHARING_ALLOWED_ORIGINS = '*' #XS_SHARING_ALLOWED_METHODS = ['POST', 'GET', 'OPTIONS', 'PUT', 'DELETE'] XS_SHARING_ALLOWED_METHODS = ['POST', 'GET'] XS_SHARING_ALLOWED_HEADERS = ['Content-Type', '*'] XS_SHARING_ALLOWED_CREDENTIALS = 'true' class XsSharing(object): """ This middleware allows cross-domain XHR using the html5 postMessage API. Access-Control-Allow-Origin: http://foo.example Access-Control-Allow-Methods: POST, GET, OPTIONS, PUT, DELETE Based off https://gist.github.com/426829 """ def process_request(self, request): if 'HTTP_ACCESS_CONTROL_REQUEST_METHOD' in request.META: response = http.HttpResponse() response['Access-Control-Allow-Origin'] = XS_SHARING_ALLOWED_ORIGINS response['Access-Control-Allow-Methods'] = ",".join( XS_SHARING_ALLOWED_METHODS ) response['Access-Control-Allow-Headers'] = ",".join( XS_SHARING_ALLOWED_HEADERS ) response['Access-Control-Allow-Credentials'] = XS_SHARING_ALLOWED_CREDENTIALS return response return None def process_response(self, request, response): response['Access-Control-Allow-Origin'] = XS_SHARING_ALLOWED_ORIGINS response['Access-Control-Allow-Methods'] = ",".join( XS_SHARING_ALLOWED_METHODS ) response['Access-Control-Allow-Headers'] = ",".join( XS_SHARING_ALLOWED_HEADERS ) response['Access-Control-Allow-Credentials'] = XS_SHARING_ALLOWED_CREDENTIALS return response 

　　

settings文件配置：

 在中間介新增配置

'finance.middleware.crossdomainxhr.XsSharing', 

　

跨域配置：

我這裏前端使用的是源是http://127.0.0.1:8081

# crossdomain #XS_SHARING_ALLOWED_ORIGINS ='*' XS_SHARING_ALLOWED_ORIGINS = 'http://127.0.0.1:8081' XS_SHARING_ALLOWED_METHODS = ['POST', 'GET'] XS_SHARING_ALLOWED_HEADERS = ['Content-Type', '*'] XS_SHARING_ALLOWED_CREDENTIALS = 'true' 

　　

 

 

django後端解決跨域方式二django-cors-headers

 經過第三方包方式：https://github.com/ottoyiu/django-cors-headers

注意：既然有第三方包，name爲何還要用第一種方式，本身寫呢？緣由是第三方包對Django的版本有要求：

 

有些Django版本比較老的話 就只能用第一種方式咯。

具體實現以下：

一、安裝django-cors-headers

pip install django-cors-headers 

　　

二、配置settings.py文件

a.在INSTALLED_APPS裏添加「corsheaders」

INSTALLED_APPS = [ ... 'corsheaders'， ... ] 

　　

b.在MIDDLEWARE_CLASSES添加配置：

MIDDLEWARE_CLASSES = ( ... 'corsheaders.middleware.CorsMiddleware', 'django.middleware.common.CommonMiddleware', ... ) 

　　

c.在sitting.py底部添加

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 = ( 'accept', 'accept-encoding', 'authorization', 'content-type', 'dnt', 'origin', 'user-agent', 'x-csrftoken', 'x-requested-with', )