正文
跨源请求cors和jsonp
提示：扫一扫查出行【扫一扫了解最新限行尾号】
复制提示
0、产生跨域的原因
浏览器的同源策略
什么是浏览器的同源策略?
src开发
ajax禁止
解决方法
jsonp
通过src绕过浏览器的同源策略
缺点：只发送GET请求
cors
通过设置相应头
分类
简单请求
复杂请求options 预检
一、cors（常用简单）
1、http://127.0.0.1:8000
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<h2>django</h2>
<input type="button" name="" id="getService" value="获取python的数据">
<script src="https://cdn.bootcss.com/jquery/3.4.1/jquery.js"></script>
<script>
$("#getService").on('click', function () {
// alert(123)
$.ajax({
// 目标域，获取数据
url: "http://127.0.0.1:8002/service/",
type: "get",
success: function (data) {
console.log(data)
// console.log(typeof data)
}
});
})
</script>
</body>
</html>
2、http://127.0.0.1:8002
def service(request):
dic = {"name": "python"}
response = HttpResponse(json.dumps(dic))
# 获取资源的ip
response["Access-Control-Allow-Origin"] = "http://127.0.0.1:8000"
return response
CORS中间件
https://www.cnblogs.com/wt7018/p/11531343.html
二、jsonp
1、http://127.0.0.1:8000
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<h2>django</h2>
<input type="button" name="" id="getService" value="获取python的数据">
<script src="https://cdn.bootcss.com/jquery/3.4.1/jquery.js"></script>
<script>
$("#getService").on('click', function () {
// alert(123)
$.ajax({
// 目标域，获取数据
url: "http://127.0.0.1:8002/service/",
type: "get",
dataType: "jsonp",
jsonp: "callbacks",
// jsonpCallback: "abc",
success: function (data) {
console.log(data)
// console.log(typeof data)
}
});
})
</script>
</body>
</html>
2、http://127.0.0.1:8002
def service(request):
dic = {"name": "python"}
dic_str = json.dumps(dic)
func = request.GET.get("callbacks")
print(func)
return HttpResponse("{}('{}')".format(func, dic_str))
