快捷導(dǎo)航

Django跨域請求問題的解決方法示例

更新時(shí)間：2018年06月16日 10:09:49 作者：畫星星高手

這篇文章主要給大家介紹了關(guān)于Django跨域請求問題解決的相關(guān)資料，文中介紹的實(shí)現(xiàn)方法包括：使用django-cors-headers全局控制、使用JsonP，只能用于Get方法以及在views.py里設(shè)置響應(yīng)頭，只能控制單個(gè)接口，需要的朋友可以參考下

前言

本文主要給大家介紹了關(guān)于Django跨域請求問題解決的幾種方法，分享出來供大家參考學(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 = 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',
)

大功告成了。

JsonP

使用Ajax獲取json數(shù)據(jù)時(shí)，存在跨域的限制。不過，在Web頁面上調(diào)用js的script腳本文件時(shí)卻不受跨域的影響，JSONP就是利用這個(gè)來實(shí)現(xiàn)跨域的傳輸。因此，我們需要將Ajax調(diào)用中的dataType從JSON改為JSONP（相應(yīng)的API也需要支持JSONP）格式。

JSONP只能用于GET請求。

什么是JSONP

首先提一下JSON這個(gè)概念，JSON是一種輕量級的數(shù)據(jù)傳輸格式，被廣泛應(yīng)用于當(dāng)前Web應(yīng)用中。JSON格式數(shù)據(jù)的編碼和解析基本在所有主流語言中都被實(shí)現(xiàn)，所以現(xiàn)在大部分前后端分離的架構(gòu)都以JSON格式進(jìn)行數(shù)據(jù)的傳輸。

那么JSONP是什么呢？

首先拋出瀏覽器同源策略這個(gè)概念，為了保證用戶訪問的安全，現(xiàn)代瀏覽器使用了同源策略，即不允許訪問非同源的頁面，詳細(xì)的概念大家可以自行百度。這里大家只要知道，在ajax中，不允許請求非同源的URL就可以了，比如www.a.com下的一個(gè)頁面，其中的ajax請求是不允許訪問www.b.com/c.php這樣一個(gè)頁面的。

JSONP就是用來解決跨域請求問題的，那么具體是怎么實(shí)現(xiàn)的呢？

JSONP原理

ajax請求受同源策略影響，不允許進(jìn)行跨域請求，而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 基于script
jsonp: 'callbacks',
//jsonpCallback:"alex",
success:function (data) {
console.log(data)
}
})
})
<button class='jsop_test'>測試</button>
</body> </html>

127.0.0.1:8080的views

import json
def jsonp_test(request):
func=request.GET.get("callbacks") #獲取請求的callbacks參數(shù)
info={"name":"fuyong","age":18} #定義數(shù)據(jù)
return HttpResponse(" ('%s')"%(func,json.dumps(info))) #傳json對象

Views.py配置響應(yīng)頭

修改views.py中對應(yīng)API的實(shí)現(xiàn)函數(shù)，允許其他域通過Ajax請求數(shù)據(jù)：

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

總結(jié)

以上就是這篇文章的全部內(nèi)容了，希望本文的內(nèi)容對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，如果有疑問大家可以留言交流，謝謝大家對腳本之家的支持。

您可能感興趣的文章: