用django-cors-headers作跨域

什麼是CORS？
CORS（跨域資源共享，Cross-Origin Resource Sharing）是一種跨域訪問的機制，可讓Ajax實現跨域訪問。
其實，在服務器的response header中，加入「Access-Control-Allow-Origin: *」便可支持CORS，很是的簡單，apache/nginx等怎麼配置，見參考文檔。
舉個例子：

• API部署在DomainA上；
• Ajax文件部署在DomainB上，Ajax文件會向API發送請求，返回數據；
• 用戶經過DomainC訪問DomainB的Ajax文件，請求數據

以上過程就發生了跨域訪問。若是直接使用Ajax來請求就會失敗，就像Chrome提示的：

?

1	No 'Access-Control-Allow-Origin' header is present on the requested resource.

如何解決Ajax跨域訪問問題？
解決跨域問題，有兩個方法：1.使用jsonp 2.使CORS生效
使用jsonp方法，須要讓服務器端放回jsonp格式的response，如Django能夠加jsonp相關的decorator，如：https://coderwall.com/p/k8vb_a/returning-json-jsonp-from-a-django-view-with-a-little-decorator-help因爲我不太喜歡這種方式，因此這裏略過了，可看後面的參考資料。
使用CORS：這個用起來比較方便，如今大多數瀏覽器都支持了，且我web服務器徹底開放給別人調用，因此比較推薦CORS。
1.使用JSONP
使用Ajax獲取json數據時，存在跨域的限制。不過，在Web頁面上調用js的script腳本文件時卻不受跨域的影響，JSONP就是利用這個來實現跨域的傳輸。所以，咱們須要將Ajax調用中的dataType從JSON改成JSONP（相應的API也須要支持JSONP）格式。
JSONP只能用於GET請求。

2.直接修改Django中的views.py文件
修改views.py中對應API的實現函數，容許其餘域經過Ajax請求數據：

?

1 2 3 4 5 6 7

def myview(_request):   response = HttpResponse(json.dumps({"key": "value", "key2": "value"}))   response["Access-Control-Allow-Origin"] = "*"   response["Access-Control-Allow-Methods"] = "POST, GET, OPTIONS"   response["Access-Control-Max-Age"] = "1000"   response["Access-Control-Allow-Headers"] = "*"   return response

3.安裝django-cors-headers
這裏還有一各發現！在Django中，有人開發了CORS-header的middleware，只在settings.py中作一些簡單的配置便可，見：https://github.com/ottoyiu/django-cors-headers/如今用起來服務器端徹底開放，開啓CORS，沒有跨域煩惱，真爽！~
安裝django-cors-headers：

?

1	pip install django-cors-headers

在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',         'Pragma', )