zoukankan      html  css  js  c++  java
  • 跨域问题

    为什么浏览器要限制跨域访问?

    两个域名之间不能跨过域名来发送请求或者请求数据,否则就是不安全的,违反浏览器的安全策略。

    一、首先说说同源策略:同源策略是浏览器上为安全性考虑制定的一种安全策略,从一个域上加载的脚本不允许访问另外一个域的文档属性。

    二、什么事同源嘞:就是协议相同,域名相同,端口想同

    在浏览器中,<script>、<img>、<iframe>、<link>等标签都可以加载跨域资源,而不受同源限制,但浏览器限制了JavaScript的权限使其不能读、写加载的内容。

     另外同源策略只对网页的HTML文档做了限制,对加载的其他静态资源如javascript、css、图片等仍然认为属于同源。

    所以由于浏览器同源策略,凡是发送请求url的协议、域名、端口三者之间任意一与当前页面地址不同即为跨域。

    三、如何进行跨域请求数据:

    1.JSONP或jquery封装的ajax,利用<script>标签的跨域能力实现跨域数据的访问,请求动态生成的JavaScript脚本同时带一个callback函数名作为参数。服务器端动态生成的脚本会产生数据,并在代码中以产生的数据为参数调用callback函数。当这段脚本加载到本地文档时,callback函数就被调用。

    2.利用iframe和location.hash,这个办法比较绕,但是可以解决完全跨域情况下的脚步置换问题。原理是利用location.hash来进行传值。

    3.window.name实现的跨域数据传输(http://www.cnblogs.com/rainman/archive/2011/02/21/1960044.html)

    • a.com/app.html:应用页面。
    • a.com/proxy.html:代理文件,一般是一个没有任何内容的html文件,需要和应用页面在同一域下。
    • b.com/data.html:应用页面需要获取数据的页面,可称为数据页面。
    • 1.在应用页面(a.com/app.html)中创建一个iframe,把其src指向数据页面(b.com/data.html)。
    • 2.在应用页面(a.com/app.html)中监听iframe的onload事件,在此事件中设置这个iframe的src指向本地域的代理文件(代理文件和应用页面在同一域下,所以可以相互通信)。
    • 3.获取数据以后销毁这个iframe,释放内存;这也保证了安全(不被其他域frame js访问)。

    4.Proxy

        使用代理方式跨域更加直接,因为SOP的限制是浏览器实现的。如果请求不是从浏览器发起的,就不存在跨域问题了。

    5、使用HTML5 postMessage

    otherWindow.postMessage(message, targetOrigin);

    otherWindow: 对接收信息页面的window的引用。可以是页面中iframe的contentWindow属性;window.open的返回值;通过name或下标从window.frames取到的值。
    message: 所要发送的数据,string类型。
    targetOrigin: 用于限制otherWindow,“*”表示不作限制

    • source – 消息源,消息的发送窗口/iframe。
    • origin – 消息源的URI(可能包含协议、域名和端口),用来验证数据源。
    • data – 发送方发送给接收方的数据。

    6、利用flash

  • 相关阅读:
    network / ethtool / eno
    java使用秘钥 对字符串进行加密、解密
    windows服务器环境下使用jenkins自动化部署vue前端项目
    ESXi下的常用命令
    使用kubeadm手动安装Kubernetes(附带Dashboard)
    cobbler高可用方案
    Linux服务器端口access改为trunk all
    Corosync fence盘替换
    Linux服务器CPU性能模式
    本地代码上传github失败常见错误
  • 原文地址:https://www.cnblogs.com/yszblog/p/6769781.html
Copyright © 2011-2022 走看看