前言
本文主要给大家介绍了关于Django跨域请求问题解决的几种方法,分享出来供大家参考学习,下面话不多说了,来一起看看详细的介绍吧。
几种方法:
- 使用django-cors-headers全局控制
- 使用JsonP,只能用于Get方法
- 在views.py里设置响应头,只能控制单个接口
django-cors-headers
首先安装
1
|
pip install django-cors-headers
|
然后在settings.py里配置一番就可以
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
|
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数据时,存在跨域的限制。不过,在Web页面上调用js的script脚本文件时却不受跨域的影响,JSONP就是利用这个来实现跨域的传输。因此,我们需要将Ajax调用中的dataType从JSON改为JSONP(相应的API也需要支持JSONP)格式。
JSONP只能用于GET请求。
什么是JSONP
首先提一下JSON这个概念,JSON是一种轻量级的数据传输格式,被广泛应用于当前Web应用中。JSON格式数据的编码和解析基本在所有主流语言中都被实现,所以现在大部分前后端分离的架构都以JSON格式进行数据的传输。
那么JSONP是什么呢?
首先抛出浏览器同源策略这个概念,为了保证用户访问的安全,现代浏览器使用了同源策略,即不允许访问非同源的页面,详细的概念大家可以自行百度。这里大家只要知道,在ajax中,不允许请求非同源的URL就可以了,比如www.a.com下的一个页面,其中的ajax请求是不允许访问www.b.com/c.php这样一个页面的。
JSONP就是用来解决跨域请求问题的,那么具体是怎么实现的呢?
JSONP原理
ajax请求受同源策略影响,不允许进行跨域请求,而script标签src属性中的链接却可以访问跨域的js脚本,利用这个特性,服务端不再返回JSON格式的数据,而是返回一段调用某个函数的js代码,在src中进行了调用,这样实现了跨域。
JSONP具体实现
127.0.0.1:8000中的index.html
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
|
<!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
1
2
3
4
5
|
import json
def jsonp_test(request):
func=request.GET.get( "callbacks" ) #获取请求的callbacks参数
info={ "name" : "fuyong" , "age" :18} #定义数据
return HttpResponse( " ('%s')" %(func,json.dumps(info))) #传json对象
|
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
|
总结
以上就是这篇文章的全部内容了,希望本文的内容对大家的学习或者工作具有一定的参考学习价值,如果有疑问大家可以留言交流,谢谢大家对服务器之家的支持。
原文链接:http://blog.deali.cn/1214.html