同源策略和解决跨域问题

同源策略和解决跨域问题


===================******===================

                            一、同源策略

                            二、错误问题

                                    1、解决方式一

                                    2、解决方式二

                            三、优化

                            四、jQuery对JSONP的实现

                            五、示例

===================******===================

一、同源策略

同源策略(Same origin policy)是一种约定,它是浏览器最核心也最基本的安全功能,如果缺少了同源策略,
则浏览器的正常功能可能都会受到影响。可以说Web是构建在同源策略基础之上的,浏览器只是针对同源策略的一种实现。


同源策略,它是由Netscape提出的一个著名的安全策略。现在所有支持JavaScript 的浏览器都会使用这个策略。
所谓同源是指,域名,协议,端口相同。当一个浏览器的两个tab页中分别打开来 百度和谷歌的页面当浏览器的百度tab页
执行一个脚本的时候会检查这个脚本是属于哪个页面的,即检查是否同源,只有和百度同源的脚本才会被执行。如果非同源,那么在请求数据时,浏览器会在控制台中报一个异常,提示拒绝访问。


二、错误问题


A项目(127.0.0.1:8000)
	index.html   #1、 发送Ajax请求 http://127.0.0.1:8011/user/
		   #3、 浏览器检测到B项目返回数据,由于浏览器安全机制同源策略,既协议,IP,端口需要相同,发现index和响应不同源,报错(CORS)


B项目(127.0.0.1:8011) 
	index_view() #2、 视图处理A项目请求,返回数据({'name':'luo','pwd':'123'})

    1、解决方式一

  B项目在返回数据时,给响应头加上
	       response['Access-Control-Allow-Origin'] = "*"  #加上这句就行
        response['Access-Control-Allow-Headers'] = 'content-type'
        response['Access-Control-Allow-Methods'] = '*'

    2、解决方式二

        使用jsonp, 原名 jsonPadding, 原理是通过script标签的跨域特性来绕过同源策略。

        JSONP 一定是GET请求,回调函数设置在url上 --> http:://127.0.0.1:8081/user/?callbacks=SayHi 

方式一:
	jsonp: 'callbacks'就是定义一个存放回调函数的键,jsonpCallback是前端定义好的回调函数方法名'SayHi',
	server端接受callbacks键对应值后就可以在其中填充数据打包返回了; 
		
		

		#后端设置
		def ajax_send2(request):
		    import json  
			callbacks=request.GET.get("callbacks")   #注意要在服务端得到回调函数名的名字
		    s = {"name":"luo","age":18}
		    return HttpResponse("%s('%s')"%(callbacks,json.dumps(dic))) 
 
方式二:
	jsonpCallback参数可以不定义,jquery会自动定义一个随机名发过去,
	那前端就得用回调函数来处理对应数据了。利用jQuery可以很方便的实现JSONP来进行跨域访问。
		

但是以上的方式也有不足。一般情况下,我们希望这个script标签能够动态的调用,
而不是像上面因为固定在html里面所以没等页面显示就执行了,很不灵活。我们可以通过javascript动态的创建script标签,
这样我们就可以灵活调用远程服务了。来看下面的优化

三、优化

===========================jQuery实现=====================
	

==================js实现==========================
	

	

四、jQuery对JSONP的实现

        getJSON实现:

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



注意:在url的后面必须添加一个callbacks参数,这样getJSON方法才会知道是用JSONP方式去访问服务,
     callbacks后面的那个?是内部自动生成的一个回调函数名

五、示例

// 跨域请求实例
$(".jiangxiTV").click(function () {

    $.ajax({
        url:"http://www.jxntv.cn/data/jmd-jxtv2.html?callback=list&_=1454376870403",
         dataType: 'jsonp',
         jsonp: 'callback',
         jsonpCallback: 'list',
         success:function (data) {
             console.log(data.data);   //  [{},{},{},{},{},{}]
             week_list=data.data;
             
             $.each(week_list,function (i,j) {
                 console.log(i,j);  // 1 {week: "周一", list: Array(19)}
                 s="

"+j.week+"列表

"; $(".show_list").append(s); $.each(j.list,function (k,v) { // {time: "0030", name: "通宵剧场六集连播", link: "http://www.jxntv.cn/live/jxtv2.shtml"} a="

"+v.name+"

"; $(".show_list").append(a); }) }) } }) })





你可能感兴趣的