用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 |
|
如何解決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 |
response = HttpResponse(json.dumps({ "key" : "value" , "key2" : "value" }))
|
3.安裝django-cors-headers
這裡還有一各發現!在Django中,有人開發了CORS-header的middleware,只在settings.py中做一些簡單的配置即可,見:https://github.com/ottoyiu/django-cors-headers/現在用起來伺服器端完全開放,開啟CORS,沒有跨域煩惱,真爽!~
安裝django-cors-headers:
1 |
|
在settings.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 = ( 'XMLHttpRequest', 'X_FILENAME', 'accept-encoding', 'authorization', 'content-type', 'dnt', 'origin', 'user-agent', 'x-csrftoken', 'x-requested-with', 'Pragma', ) |