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

    在我们日常进行web开发时,经常需要进行第三方接口调用。在js中有一个很重要的安全性限制,被称为“Same-Origin Policy”(同源策略)。这一策略对于JavaScript代码能够访问的页面内容做了很重要的限制,即JavaScript只能访问与包含它的文档在同一域下的内容。

    一.哪些条件下属于跨域

    主域相同,子域不同 :如map.baidu.com  以及 baike.baidu.com 

    主域不同:如:baidu.com以及 weibo.com

    端口不同:http://lvyou.baidu.com 以及 https://lvyou.baidu.com:8088

    协议不同:https://lvyou.baidu.com 以及http://lvyou.baidu.com

    二.跨域解决办法

    1.同主域,子域不同:

    比如:a.html b.html 都属于test.com

    只需 在a.html js中写上 document.domain = 'test.com';  

     b.html js中写上 document.domain = 'test.com';  

    即可以相互通信了,可以相互调用了

    2.完全不同主域:

    解决办法:

    1).jsonp

    经测试,js的src属性不受同源策略的影响,比如:a.html页面中 引用js <script src='b.js'></script>,其中b.js是在 b.html中的(此时讨论的 a b 已不在同一域名下面)。

    此时,给b.js传递一个在a.html中定义好的回调函数,b中既可以调用此回调函数

    如:a.html (localhost:2001/a.html)

    <html>
        <head></head>
        <body>
              <script src='localhost:2002/b.js?callback=handle'></script>
              <script>
                 function handle(res){
                      console.log(res);
                 }
              </script>
        </body>
    </html>

    在b.js中

    handle({test:'nihao'});

    jsonp方式方便易用,但是只能进行get方式请求。

    2).iframe

    iframe跨域方式,通用性比较强。不仅可以进行get方式,还可以进行post跨域访问。

    A域下有 request.html页面 需要跨域访问 B域下面的 response.html页面

    在request.html页面中

    <html>
        <head>
        </head>
        <body>
              <iframe src="B/response.php"></iframe>
              
         </body>
    </html>

    可以将需要发送ajax的param通过url形式传递给 response.html ? xx= xx &callback =xx

    在response.html页面中创建 xhr,并发送请求(post or get ),将结果返回,此时因为受同源策略影响,不能访问callback(跟jsonp的  script的src不同);此时在response.html中创建一个iframe,

    url指向A域下的 crossDomain.html中,并将返回结果作为参数附加在crossDomain.html ? xx =xx &callback =xx

    因为crossDomain.html和 request.html属于同一域下,则 通过window.top及可以访问requet.html页面的资源了。

    3).flash跨域访问

     

  • 相关阅读:
    2020.10.6 提高组模拟
    GMOJ 6815. 【2020.10.06提高组模拟】树的重心
    Codeforces Round #542 [Alex Lopashev Thanks-Round] (Div. 1) D. Isolation
    Forethought Future Cup
    Codeforces Round #543 (Div. 2, based on Technocup 2019 Final Round) D. Diana and Liana
    2020.10.07提高组模拟
    2020.10.05提高组模拟
    9.29 联赛组作业
    JZOJ 3978. 寝室管理
    Centos7下安装netstat的方法
  • 原文地址:https://www.cnblogs.com/wuya16/p/2923834.html
Copyright © 2011-2022 走看看