前言
本文主要給大家介紹了關(guān)于Django跨域請(qǐng)求問題解決的幾種方法，分享出來供大家參考學(xué)習(xí)，下面話不多說了，來一起看看詳細(xì)的介紹吧。
幾種方法：
使用django-cors-headers全局控制 使用JsonP，只能用于Get方法 在views.py里設(shè)置響應(yīng)頭，只能控制單個(gè)接口django-cors-headers
首先安裝
pip install django-cors-headers
然后在settings.py里配置一番就可以
INSTALLED_APPS = [ ... 'corsheaders'， ... ] MIDDLEWARE_CLASSES = ( ... 'corsheaders.middleware.CorsMiddleware', 'django.middleware.common.CommonMiddleware', # 注意順序 ...)#跨域增加忽略CORS_ALLOW_CREDENTIALS = TrueCORS_ORIGIN_ALLOW_ALL = TrueCORS_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',)
大功告成了。
JsonP
使用Ajax獲取json數(shù)據(jù)時(shí)，存在跨域的限制。不過，在Web頁(yè)面上調(diào)用js的script腳本文件時(shí)卻不受跨域的影響，JSONP就是利用這個(gè)來實(shí)現(xiàn)跨域的傳輸。因此，我們需要將Ajax調(diào)用中的dataType從JSON改為JSONP（相應(yīng)的API也需要支持JSONP）格式。
JSONP只能用于GET請(qǐng)求。
什么是JSONP
首先提一下JSON這個(gè)概念，JSON是一種輕量級(jí)的數(shù)據(jù)傳輸格式，被廣泛應(yīng)用于當(dāng)前Web應(yīng)用中。JSON格式數(shù)據(jù)的編碼和解析基本在所有主流語(yǔ)言中都被實(shí)現(xiàn)，所以現(xiàn)在大部分前后端分離的架構(gòu)都以JSON格式進(jìn)行數(shù)據(jù)的傳輸。
那么JSONP是什么呢？
首先拋出瀏覽器同源策略這個(gè)概念，為了保證用戶訪問的安全，現(xiàn)代瀏覽器使用了同源策略，即不允許訪問非同源的頁(yè)面，詳細(xì)的概念大家可以自行百度。這里大家只要知道，在ajax中，不允許請(qǐng)求非同源的URL就可以了，比如www.a.com下的一個(gè)頁(yè)面，其中的ajax請(qǐng)求是不允許訪問www.b.com/c.php這樣一個(gè)頁(yè)面的。
JSONP就是用來解決跨域請(qǐng)求問題的，那么具體是怎么實(shí)現(xiàn)的呢？
JSONP原理
ajax請(qǐng)求受同源策略影響，不允許進(jìn)行跨域請(qǐng)求，而script標(biāo)簽src屬性中的鏈接卻可以訪問跨域的js腳本，利用這個(gè)特性，服務(wù)端不再返回JSON格式的數(shù)據(jù)，而是返回一段調(diào)用某個(gè)函數(shù)的js代碼，在src中進(jìn)行了調(diào)用，這樣實(shí)現(xiàn)了跨域。
JSONP具體實(shí)現(xiàn)
127.0.0.1:8000中的index.html
<!DOCTYPE html><html><head><title>GoJSONP</title></head><body>$(".jsonp_test").click(function () {$.ajax({url:"http://127.0.0.1:8008/service/",type:"get",dataType:"jsonp", // 偽造ajax 基于scriptjsonp: 'callbacks',//jsonpCallback:"alex",success:function (data) {console.log(data)}})})<button class='jsop_test'>測(cè)試</button></body> </html>
新聞熱點(diǎn)
疑難解答
圖片精選
