美文网首页
前端跨域的解决方法

前端跨域的解决方法

作者: 默小柒 | 来源:发表于2016-08-30 16:40 被阅读0次

    介绍 : 

    域名级数 是指一个域名由多少级组成,域名的各个级别被“.”分开,简而言之,有多少个点就是几级域名。

    子域名:  是一级域名的下一级 ,如 m

    主域  :  因为IP地址是纯数字,比较难记,所以,在Internet上一般用域名来代替IP地址,从右到左依次为最高域名段、次高域名段等,最左的一个字段为主机名。如 meilishuo

    一级域名(顶级域名) : 主域名(meilishuo) +  "."  + 顶级域名(com)组成,如【meilishuo.com】

    二级域名 :二级域名是指顶级域名之下的域名,如 m.meilishuo.com

    (二级域名及其以上级别的域名,统称为子域名,不在“注册域名”的范畴中。)

    三级域名 : 

    泛域名 :指一个域名下的所有子域名都被解析到同一个IP地址上。

    同源策略

    PS: 

    1,如果是端口和协议造成的跨域,前台表示无能为力

    2,在跨域问题上,域仅仅是通过“URL的首部”来识别,不会去尝试判断相同的ip地址对应着两个域或两个域是否在同一个ip上。


    解决方案 : 

    1> document.domain + iframe      (只有在主域相同的时候才能使用该方法)

    2> 动态创建script (因为script标签不受同源策略的限制。)

    3> location.hash + iframe

    原理是利用location.hash来进行传值。

    假设域名a.com下的文件cs1.html要和cnblogs.com域名下的cs2.html传递信息。

    1) cs1.html首先创建自动创建一个隐藏的iframe,iframe的src指向cnblogs.com域名下的cs2.html页面

    2) cs2.html响应请求后再将通过修改cs1.html的hash值来传递数据

    3) 同时在cs1.html上加一个定时器,隔一段时间来判断location.hash的值有没有变化,一旦有变化则获取获取hash值

    注:由于两个页面不在同一个域下IE、Chrome不允许修改parent.location.hash的值,所以要借助于a.com域名下的一个代理iframe

    4> window.name + iframe ( window.name 的美妙之处:name 值在不同的页面(甚至不同域名)加载后依旧存在,并且可以支持非常长的 name 值(2MB)。) 

    5> postMessage(HTML5中的XMLHttpRequest Level 2中的API)

    6> CORS( CORS背后的思想,就是使用自定义的HTTP头部让浏览器与服务器进行沟通,从而决定请求或响应是应该成功,还是应该失败。)

    7> JSONP

    JSONP包含两部分:回调函数和数据。

    回调函数是当响应到来时要放在当前页面被调用的函数。

    数据就是传入回调函数中的json数据,也就是回调函数的参数了。

    8> web sockets

    web sockets是一种浏览器的API,它的目标是在一个单独的持久连接上提供全双工、双向通信。(同源策略对web sockets不适用)

    web sockets原理:在JS创建了web socket之后,会有一个HTTP请求发送到浏览器以发起连接。取得服务器响应后,建立的连接会使用HTTP升级从HTTP协议交换为web sockt协议。

    只有在支持web socket协议的服务器上才能正常工作。

    相关文章

      网友评论

          本文标题: 前端跨域的解决方法

          本文链接:https://www.haomeiwen.com/subject/xjofettx.html