1.跨域简介

      当访问的资源URL与当前URL的协议、域名、端口三者有任何一个不一样时,称为跨域。浏览器的同源策略:要求所访问资源的协议名、域名、端口必须完全相同。通常不允许XMLHttpRequest发送跨域请求,此处介绍解决跨越的两种方式:CORS和JSONP。

2.CORS

      CORS是一个W3C标准,全称是Cross-Origin Resource Sharing 跨域资源共享。它允许浏览器向跨源服务器发出XMLHttpRequest请求,需要设置服务器端允许跨域请求。CORS方式实现简单,但存在安全问题。

// 允许任何域的跨域请求
header("Access-Control-Allow-Origin:*");

3.JSONP

原理:

  • 虽然XMLHttpRequest无法跨越,但HTML的标签是支持跨域的,如script标签、iframe标签等
  • 通过HTML标签向服务器发送一个包含callback参数的跨域请求,服务端返回数据时将这个callback参数作为函数名来包裹住JSON数据
  • 客户端提供一个对应的callback回调函数,处理服务器返回的数据

举例说明上述原理:
html文件

<script>
  //3.客户端提供一个对应的callback回调函数,处理服务器返回的数据
  function handle(result){
     console.log(result);
  }
</script>
<body>
    <!-- 1.通过HTML标签向服务器发送一个请求,包含callback参数 -->
    <script src="http://127.0.0.1/ajax/server/test06.php?callback=handle"></script>
</body>

php文件

    $callback = $_REQUEST['callback'];
    $user = [
        "id" => 1,
        "name" => "tom",
        "age" => 29
    ];
    // 2.服务端返回数据时将这个callback参数作为函数名来包裹住JSON数据
    $result = json_encode($user);
    echo "$callback($result)";

jQuery实现JSONP,使用$.ajax(),只需要指定dataType为jsonp即可。

$.ajax({
    type: 'get',  // JSONP只支持get方式发送请求
    url: 'http://127.0.0.1:80/ajax/server.php', // 访问另一个域的资源
    dataType: 'jsonp',
    success: function (result) {
        console.log(result);
    }
});

4.API数据接口

      提供数据返回服务的API接口。可以让开发者在无需理解内部细节的情况下,调用他人提供的资源,简单、高效的获取数据。
常用API数据平台:

说点什么
欢迎骚扰,有缘人互加友链
支持Markdown语法
好耶,沙发还空着ヾ(≧▽≦*)o
Loading...