django跨域jsonp

1.同源策略概念
同源策略(Same origin policy)是一种约定,它是浏览器最核心也最基本的安全功能,如果缺少了同源策略,则浏览器的正常功能可能都会受到影响。可以说Web是构建在同源策略基础之上的,
浏览器只是针对同源策略的一种实现。
同源策略,它是由Netscape提出的一个著名的安全策略。现在所有支持JavaScript 的浏览器都会使用这个策略。所谓同源是指,域名,协议,端口相同。当一个浏览器的两个tab页中分别打开来
百度和谷歌的页面当浏览器的百度tab页执行一个脚本的时候会检查这个脚本是属于哪个页面的,即检查是否同源,只有和百度同源的脚本才会被执行。如果非同源,那么在请求数据时,
浏览器会在控制台中报一个异常,提示拒绝访问。
jsonp:其实就是JSON+Padding,json填充.

jsonp是json用来跨域的一个东西。原理是通过script标签的跨域特性来绕过同源策略

1.自己创建标签实现一个jsonp 前端代码

<button class="get_service">JSONP</button>
<script>
 function jsp(arg) {
 	console.log(arg);
 	console.log(typeof arg);
 	var data=JSON.parse(arg);
 	console.log(data);
 	console.log(typeof data);
 }

function get_jsonp_data(url) {
 	var ele_script=$("<script>");
 	ele_script.attr("src",url)
 	ele_script.attr("id","jsonp");
 	$("body").append(ele_script);
 	$("#jsonp").remove()
 }

$(".get_service").click(function () {
	get_jsonp_data("http://127.0.0.1:8008/service/?callbacks=jsp")
 });
</script>

后端代码

import json
def service(request): # jsonp
 	func=request.GET.get("callbacks")
 	info={"name":"lilei","age":34,"price":200}
 	return HttpResponse(" ('%s')"%(func,json.dumps(info)))

### jQuery框架也当然支持JSONP,可以使用$.getJSON(url,[data],[callback])方法

**$.ajax实现** **注意 JSONP一定是GET请求**

$(".get_service-4").click(function () {

	$.ajax({
 		url:"http://www.jxntv.cn/data/jmd-jxtv2.html",
 		type:"get",
 		dataType:"jsonp", // 伪造ajax 基于script
 		jsonp: 'callbacks',
 		jsonpCallback:"list",
 		success:function (data) {
 			//console.log(data.data);

	var html="";
 		$.each(data.data,function (index,weekday) {
 		console.log(weekday); // {week: "周一", list: Array(19)}
 		html+='<p>'+weekday.week+'</p>'; 
 		$.each(weekday.list,function (j,show) {
 			html+= '<p><a href='+show.link+'>'+show.name+'</a></p>'
 })
 });
$("body").append(html)

django跨域jsonp
http://www.jcwit.com/article/162/
作者
Carlos
发布于
2018年6月24日
许可协议