• 跨域问题的解决策略


    跨域:同源策略的限制
     
    我知道有三种方式:
    第一种: jsonp(json+padding):实现原理是利用script标签的src属性可以跨域加载别的域中的文件来实现的
    假设有一个a.com和b.com,现在a.com想访问b.com,在a.com中的一个网页中加入下面的代码:
    <script>
    function aaa(data){
    //对data进行相应的操作
    }
    </script>
    <script src="http://www.b.com/test.php?name=lisi&callback=aaa"></script>
     
    在b.com中的test.php中可以接收传递过来的参数name还有callback,然后执行:
    b.com中执行
    echo 'callback(要回传给a.com的数据)'
     
    第二种: iframe
    在a.com中创建一个a.html,在b.com中创建一个b.html,再在a.com中创建c.html,a.html调用b.html,再在b.thml中调用c.html,最后在c.khtml中top.function
     
    第三种: 服务器代理:因为服务器端程序是不存在跨域问题
     
    还有,我听说过window.name, 还有cros跨资源共享,不过这个不太了解了。
     
     
    跨域:
     
    浏览器对于javascript的同源策略的限制,例如a.cn下面的js不能调用b.cn中的js,对象或数据(因为a.cn和b.cn是不同域),所以跨域就出现了.
     
     
    同源策略:
     
    请求的url地址,必须与浏览器上的url地址处于同域上,也就是域名,端口,协议相同.
     
    比如:我在本地上的域名是study.cn,请求另外一个域名一段数据
     
    jsonp:
     
        jsonp 全称是JSON with Padding,是为了解决跨域请求资源而产生的解决方案,是一种依靠开发人员创造出的一种非官方跨域数据交互协议。
     
        一个是描述信息的格式,一个是信息传递双方约定的方法。
     
        jsonp的产生:
     
        1.AJAX直接请求普通文件存在跨域无权限访问的问题,不管是静态页面也好.
     
        2.不过我们在调用js文件的时候又不受跨域影响,比如引入jquery框架的,或者是调用相片的时候
     
        3.凡是拥有scr这个属性的标签都可以跨域例如<script><img><iframe>
     
        4.如果想通过纯web端跨域访问数据只有一种可能,那就是把远程服务器上的数据装进js格式的文件里.
     
        5.而json又是一个轻量级的数据格式,还被js原生支持
     
        6.为了便于客户端使用数据,逐渐形成了一种非正式传输协议,人们把它称作JSONP,该协议的一个要点就是允许用户传递一个callback 参数给服务端,
     
     
    iframe跨域
     
        
        基于iframe实现的跨域要求两个域具有aa.xx.com,bb.xx.com 这种特点,
     
        也就是两个页面必须属于一个基础域(例如都是xxx.com),使用同一协议和同一端口,这样在两个页面中同时添加document.domain,就可以实现父页面调用子页面的函数
     
        要点就是 :通过修改document.domain来跨子域
     
     
    服务器端跨域
     
        因为服务器端程序是不存在跨域问题
     
        也是利用src加载跨域的文件
     
     
    使用HTML5中window.postMessage方法
     
        window.postMessage(message,targetOrigin) 方法是html5新引进的特性,可以使用它来向其它的window对象发送消息,无论这个window对象是属于同源或不同源,目前IE8+、FireFox、Chrome、Opera等浏览器都已经支持window.postMessage方法。
     
        调用postMessage方法的window对象是指要接收消息的那一个window对象,该方法的第一个参数message为要发送的消息,类型只能为字符串;第二个参数targetOrigin用来限定接收消息的那个window对象所在的域,如果不想限定域,可以使用通配符 * 。
     
        需要接收消息的window对象,可是通过监听自身的message事件来获取传过来的消息,消息内容储存在该事件对象的data属性中。
     
        上面所说的向其他window对象发送消息,其实就是指一个页面有几个框架的那种情况,因为每一个框架都有一个window对象。在讨论第二种方法的时候,我们说过,不同域的框架间是可以获取到对方的window对象的,而且也可以使用window.postMessage这个方法。
     
     
    使用window.name来进行跨域
     
        window对象有个name属性,该属性有个特征:即在一个窗口(window)的生命周期内,窗口载入的所有的页面都是共享一个window.name的,每个页面对window.name都有读写的权限,window.name是持久存在一个窗口载入过的所有页面中的,并不会因新页面的载入而进行重置。
     
     
    cros跨域资源共享
     
    http头加 Access-Control-Allow-Origin字段
     
     
     
     
     
     
     
     
     
     
     
     
     
     
     
     
     
     
     
     
     
     
     
     
     
     
     

  • 相关阅读:
    浅谈页面的瀑布流布局
    前端常用动画库
    JavaScript七宗罪和一些槽点
    prototype与 _proto__的关系
    Javascript之傻傻理不清的原型链、prototype、__proto__
    C#开发微信门户及应用(26)-公众号微信素材管理
    C#开发微信门户及应用(25)-微信企业号的客户端管理功能
    基于InstallShield2013LimitedEdition的安装包制作
    Entity Framework 实体框架的形成之旅--Code First模式中使用 Fluent API 配置(6)
    Entity Framework 实体框架的形成之旅--Code First的框架设计(5)
  • 原文地址:https://www.cnblogs.com/limengyao/p/8604386.html
Copyright © 2020-2023  润新知