目录
  1. 1. jsonp接口使用
    1. 1.1. 什么是同源
    2. 1.2. 什么是跨域
    3. 1.3. cors:
    4. 1.4. JSONP
跨域cors和jsonp

jsonp接口使用

什么是同源

​ 例如:http://127.0.0.1/2017-8-17/09.waterFall_ajax/
http://127.0.0.1/2017-8-17/09.waterFall_ajax/api/waterFall.php
​ 1.协议名:http
​ 2.地址一样
​ 3.端口号:默认是80端口
上述三个条件一样 称之为 同源

不同源
协议,地址,端口号 有一个不一样 称之为不同源

什么是跨域

​ 不同源的网站之前 互相发送请求

qq_pic_merged_1572613958692

cors:

​ 跨域的一种方法,在后台设置允许跨域就行了
​ 有后台程序员来设置,但此方法只能用于HTML5

1
<?php 
2
  // 设置允许跨域访问
3
  // 有后台程序员来设置
4
  header('Access-Control-Allow-Origin: *');
5
   echo '你来了呀';
6
?>
1
<script>
2
  document.querySelector('input').onclick = function(){
3
    var xhr  = new XMLHttpRequest();
4
    xhr.open('get','http://192.168.70.78/2017-8-17/11.cross/backData.php');
5
    xhr.onreadystatechange = function(){
6
      if(xhr.readyState==4&&xhr.status==200){
7
        console.log(xhr.responseText);
8
      }
9
    }
10
    xhr.send(null);
11
  }
12
13
</script>
JSONP

02

1
<script>
2
      function doSomething(data){
3
        console.log(data);
4
      }
5
  </script>
6
  <script  src="http://192.168.70.78/2017-8-17/12.JSONP/backData.php?callback=doSomething">
7
8
     doSomething({"name":"jack","food":"西兰花"})
9
  </script>
1
<?php 
2
  // echo 'console.log("数据给你,拿去")';
3
  // doSomething
4
  $methodName = $_GET['callback'];
5
6
  // 把数据 拼接到 函数名的后面
7
  echo $methodName.'({"name":"jack","food":"西兰花"})';
8
?>

JSONP常混淆的问题:
JSONP的原理:利用script的src发送跨域请求,服务器返回一个方法的调用,并且返回数据。
JSONP能不能发post请求:不能,数据是拼在url后面的
JSONP跟ajax有没有关系:没有
jQuery中的JSONP跟ajax有没有关系:也没有,jQuery中只是为了方便调用,但是跟ajax没有关系

文章作者: Byron
文章链接: https://byronk.top/2019/06/20/%E8%B7%A8%E5%9F%9Fcors%E5%92%8Cjsonp/
版权声明: 本博客所有文章除特别声明外,均采用 CC BY-NC-SA 4.0 许可协议。转载请注明来自 byron's | BLOG
打赏
  • 微信
  • 支付宝

评论