美文网首页
跨域问题原因及解决方法

跨域问题原因及解决方法

作者: hello_water | 来源:发表于2017-05-01 20:50 被阅读137次
    1.跨域问题是什么?

    浏览器的同源策略是浏览器上为安全考虑的重要的安全策略。
    从一个域上加载的脚本不允许访问另外一个域的文档属性。
    如果没有同源限制,恶意网站的页面就能嵌入其它网站的页面,并窃取到关键信息。比如嵌入某网站登录页面,在用户登录的时候拿到账号密码。
    跨域请求在一些浏览器上还是会被发起,但是会被浏览器拦截。Chrome下跨域请求不被发起。

    2.同源是什么?

    同源:URL由协议、域名、端口、路径组成,如果协议、域名、端口相同,就是同源。

    3.哪些标签没有同源限制?

    <script> <img> <iframe> <link>都可以加载跨域资源,不受同源限制。
    这些标签不受同源限制的原理是什么?script加载资源的原理是什么?(待补充)
    script并无跨域限制, 这是因为script标签引入的文件不能够被客户端的 js 获取到, 不会影响到原页面的安全, 因此script标签引入的文件没必要遵循浏览器的同源策略。

    4.解决方法

    a.使用<script> <img> <iframe> <link>等标签加载资源

    b.通过jsonp跨域
    1.用法
    JSONP形式的访问是基于script标签。可以通过第三方服务器生成的动态js代码来回调本地js方法,方法中的参数由第三方服务器在后台获取,并以JSON形式填充到js方法中。
    使用js可以生成如下html:
    <script type="text/javascript" src="https://www.targetDomain.com/jsonp?callback=callbackName"></script>
    2.原理
    服务器端会返回js代码,这段代码会自动执行,并负责调用回调函数callbackName。
    3.特点
    兼容性好,在请求结束后通过callback方式回传结果。
    使用get方式进行资源请求。
    它只支持跨域HTTP请求这种情况,不能解决不同域的两个页面之间如何进行JavaScript调用的问题。

    c.通过修改document.domain来跨子域
    d.使用window.name来进行跨域
    e.使用HTML5中新引进的window.postMessage方法来跨域传送数据
    f.使用代理服务器,使用代理方式跨域更加直接,因为同源限制是浏览器实现的。如果请求不是从浏览器发起的,就不存在跨域问题了。
    g.CORS全称是"跨域资源共享"(Cross-origin resource sharing),CORS需要浏览器和服务器同时支持。目前,所有浏览器都支持该功能
    (每种方法如何实现,待补充)

    http://louiszhai.github.io/2016/01/11/cross-domain/#flash-URLLoder

    相关文章

      网友评论

          本文标题:跨域问题原因及解决方法

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