• jsonp跨域


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

          跨域是指从一个域名的网页去请求另一个域名的资源。比如从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()}

    ---------------------------------------------------------------------------上---------面-----------见----解----如-------有----------错-------误----,----请----各----位----大--------佬-----指-------正---------------------------------------------------------------------------          

  • 相关阅读:
    2-4 Vue中的属性绑定和双向数据绑定
    MySQL索引失效的几种情况
    MySQL索引失效的几种情况
    Linux实现MYSQl数据库的定时备份
    Linux实现MYSQl数据库的定时备份
    你还在 Select * 吗?
    你还在 Select * 吗?
    世界顶级的程序员们告诉你:这些书都是你应该读的
    世界顶级的程序员们告诉你:这些书都是你应该读的
    真正努力和不努力的程序员,发朋友圈究竟有什么不一样?
  • 原文地址:https://www.cnblogs.com/suihang/p/9563746.html
Copyright © 2020-2023  润新知