JSONP跨域

转载

mb5ffd7010f3b33 2021-10-23 13:28:00

文章标签 json 数据 jquery 跨域封装 文章分类 Java 后端开发

关于跨域

Ajax是不能跨域的？什么是跨域？

比如我们本地的服务器地址是127.0.0.2:80去请求127.0.0.1:80中的文件内容，此时是不允许的，因为当前这个两个地址不在一个“域”，所以会报错；再比如127.0.0.1:80去请求127.0.0.1:3000也是不允许的，因为端口号也不同，所以也可以理解为不在一个“域”。

127.0.0.1:3000和127.0.0.1:80这种请求也是不允许的，因为这两个请求的ip地址是同一个，但是端口是不同的，端口号本质上没有什么不同，只是为了请求协议之前开辟一个专有的请求通道

JSONP

我们看下面一段代码

<script src="demo.js"></script> //定义了sayHello方法
<script>
  sayHello()    //执行sayHello
</script>

在demo.js 文件中定义了sayHello方法，然后我们在html页面中是可以调用这个方法的

此时我们调用和设置方法换了一个位置

<script>
  function sayHello(str){
    alert(str)
  }
</script>
<script src="sayHello.js"></script>

此时页面就回弹出

JSONP跨域_数据

JSONP其实就是模仿这个方法将调用传入的数据，前端设置方法接收

此时我们的sayHello.js如果传入的是参数

sayHello({
    "info": [
        {  "id":1,  "name": "小明",  "age": 18,  "sex": "男"
        },
        {  "id":2,  "name": "小刚",  "age": 15,  "sex": "男"
        },
        { "id":3, "name": "小红", "age": 14, "sex": "女"
        }
      ]
  })

JSONP跨域_json_02

如果使用JSONP跨域，一定和后端是约定俗称的数据格式,JSONP数据很不安全，除非信任数据来源，如果涉及到涉密信息，一定不能使用JOSNP，比如数据中有用户的手机号，身份证号码等等；

jQuery的JSONP的使用

jQuery帮我们封装好了JSONP请求

<body>
  <input type="button" value="点击发送请求" id="btn">
  <script src="js/jquery.min.js"></script>
  <script >
    $("#btn").click(function(){
      $.ajax("https://dss0.bdstatic.com/5aV1bjqh_Q23odCf/static/superman/img/topnav/tupian@2x-482fc011fc.png",{
        "dataType": "jsonp", //请求类型
        "jsonpCallback": 'fetchJSON_comment98', //设置回调函数名称
        "success": function(JSONdata) {
          console.log(JSONdata)
        }
      })
    })
  </script>
</body>