jsonp跨域-蒲公英云

jsonp跨域

心已赠人 2023-06-05 05:56 69阅读 0赞

首先我们来说说什么是跨域

　　跨域：是指从一个域名的网页去请求另一个域名的资源。比如从www.baidu.com 页面去请求 www.google.com 的资源。但是一般情况下不能这么做，它是由浏览器的同源策略造成的

　　　这里我们又会有一个问题啥叫同源策略啊，那我们再来说说同源策略，

　　　首先什么叫同源呢字面理解就是相同的起源，同源指的就是域名，协议，端口均相同

　　　那现在又有一个问题，为什么浏览器要有同源策略呢，我打个比方。。。。。。。。。。嘀嘀嘀准备发车了

        举个大栗子：你和你对象是一家 ，隔壁是老王一家，你每天可以回家和你对象做一些有趣的事情（你们懂得），要是老王也可以回你家和你对象做一些有趣的事情，那你能同意吗？
                              肯定不能啊，对吧（要是你就喜欢做一道绿光，那在下佩服）
                               整个栗子里，你家就相当于一个域名，而你和你对象就相当于域名里面的资源，而老王家也相当于一个域名，老王和老王对象相当于老王家这个域名下的资源，
                               正常情况下是肯定不能互相访问的，这就是同源策略所做的事情，让不同域名间不能乱访问互相的资源
       但是我们能不能绕过同源策略访问到呢，当然可以啊，要是不可以的话，偷情这个词岂不是失去了意义，那现在我们来讲一种跨域的方法：jsonp
       jsonp是一种非正式的传输协议（注意他和json 轻量级的数据交换格式半毛钱关系都没有）
       原理：利用了src不受同源策略的影响 ，可以访问其他页面的数据
      大家需要注意一点：jsonp并不能解决所有的跨域问题，因为使用jsonp跨域需要被提供jsonp接口
       步骤：1.创建一个全局函数
                       function  huidiao(data)\{ 
                           console.log(data)\}
                 2.动态创建一个script标签
                        var script1 = document.createElement("script")
                 3.给标签的src赋值  （即接口的url）
                        script1.src = "http:www.baidu.com?a=1&b=2&cb=huidiao"
                 4.将属性为callback值为全局函数名的键值对写到url的后面
                      注意 huitiao即为全局函数的名称   二者名字只要相对应就可以
                      大部分jonsp接口都为callback，百度的jsonp接口为cb
                 5.将标签插入到页面上
                       document.body.appendChild(script1);
                 6.将标签加载完后删除
                      script1.onload = function()\{ 
                      this.remove()\}