• Ajax请求跨域问题 -- 转载


    几乎每种浏览器都存在默认的安全机制,都有同源策略,因为浏览器恶意的把每个外部请求的都当做是黑客攻击,相当于是对自身的保护,所以浏览器在运行脚本时会判断脚本与请求的页面是否是同一来源,这个同一来源,包括1、协议,2、地址,3、端口,只有三者都相同才被认为是同一来源。
    
    解决方案:1,在服务器端的响应头中添加一个http参数:
    res.setHeader("Access-Control-Allow-Origin", "*");
    res.setHeader('Access-Control-Allow-Methods', 'PUT, GET, POST, DELETE, OPTIONS');
    用于告诉客户端可以访问这个跨域的资源,但是问题又来了,知道HTTP协议的同学都清楚,http是一种无状态的基于请求响应的协议,每次的请求都是全新的,服务器无法保持状态,这时我们可以利用服务器的session机制:
      session是服务器的一个内存空间,当一个客户端访问服务器时,服务器会为这个客户端创建一个唯一
    的空间,并且给定一个编号,这个编号就是sessionid,在响应客户端时,在响应头中加入了cookie.sessionid=xxxx,将这个cookie响应给客户端,当这个客户端下一次请求服务器时,客户端会自动将cookie写到请求头中发送给
    给服务器,,服务器接受到这个请求之后,从请求头中取出这个sessionid,这样就可以判断是哪一个用户了。但是,问题又来了,如果出现跨域,服务器响应时写了res.setHeader("Access-Control-Allow-Origin", "*");,
    客户端就会忽略本地的cookie,从而向服务器发送请求时不再发送cookie,这个服务器找不到cooie,就会认为你是个新用户,哪怕你已经请求过N次。
    
    解决方案:JSONP
    
       原理:Web页面上调用js文件时则不受是否跨域的影响(不仅如此,凡是拥有”src”这个属性的标签都拥有跨域的能力,比如<script>、<img>、<iframe>);
    所以,我们可以这样做,在客户端声明一个处理json的函数,这个函数作为参数传给服务器,由服务器调用服务器生成动态的调用代码,并且把想要传给客户端的json数据作为实参注入)
    jQuery已经为我们做好了一切,我们只需调用即可
      例如:
            客户端代码:
                $.ajax({
                   type: "GET",
                   url: "服务器处理地址",
                   dataType:"jsonp",
                   jsonp: "callback",//传递给请求处理程序或页面的,用以获得jsonp回调函数名的参数名(一般默认为:callback)
                   jsonpCallback:"handle",//自定义的jsonp回调函数名称,默认为jQuery自动生成的随机函数名,也可以写"?",jQuery会自动为你处理数据
                   success: function( data){ 
                            alert( 'helloworl '+ data.count  );
                    } , 
                   error: function(msg){
                       alert( msg);
                   }
                }); 
    
                //回调函数,由服务器端调用的函数
                function handle( jsonResult  ){
                    //处理
                }
    
            服务器代码:
                //先取得传过来的回调函数名
                var cb=request.callback;
    
                //要传送给客户端的 json数据
                var jsonobj=xxx
    
                res.send("("+jsonobj+");");//即生成类似于  handle(jsonobj); 后发送给客户端
  • 相关阅读:
    简单使用Git和Github来管理自己的代码和读书笔记
    js中的事件委托
    join和split的区别
    浮动的清除方式
    图片代替多选(单选)按钮
    js和jquery实现简单的选项卡
    闭包——之初理解
    Django REST framework+Vue 打造生鲜超市(七)
    Django REST framework+Vue 打造生鲜超市(六)
    Django REST framework+Vue 打造生鲜超市(五)
  • 原文地址:https://www.cnblogs.com/historymemory/p/6140064.html
Copyright © 2020-2023  润新知