文章目录

跨域

1. 相关概念

同源策略是浏览器的一种安全策略，所谓同源是指 域名，协议，端口 完全相同，只有同源的地址才可以相互通过

AJAX 的方式请求。

同源或者不同源说的是两个地址之间的关系，不同源地址之间请求我们称之为跨域请求什么是同源？例如：http://www.example.com/detail.html 与一下地址对比

对比地址 是否同源 原因
http://api.example.com/detail.html 不同源 域名不同
https://www.example.com/detail.html 不同源 协议不同
http://www.example.com:8080/detail.html 不同源 端口不同
http://api.example.com:8080/detail.html 不同源 域名、端口不同
https://api.example.com/detail.html 不同源 协议、域名不同
https://www.example.com:8080/detail.html 不同源 端口、协议不同
http://www.example.com/other.html 同源 只是目录不同

2. 解决方案

现代化的 Web 应用中肯定会有不同源的现象，所以必然要解决这个问题，从而实现跨域请求。

2.1. JSONP

JSON with Padding，是一种借助于 script 标签发送跨域请求的技巧。

其原理就是在客户端借助 script 标签请求服务端的一个动态网页（php 文件），服务端的这个动态网页返回一段带有函数调用的 JavaScript 全局函数调用的脚本，将原本需要返回给客户端的数据传递进去。

以后绝大多数情况都是采用 JSONP 的手段完成不同源地址之间的跨域请求客户端 http://www.zce.me/users-list.html

 <script src="http://api.zce.me/users.php?callback=foo"></script>

服务端 http://api.zce.me/users.php?callback=foo 返回的结果

foo(['我', '是', '你', '原', '本', '需', '要', '的', '数', '据'])

总结一下：由于 XMLHttpRequest 无法发送不同源地址之间的跨域请求，所以我们必须要另寻他法，script 这种方案就是我们最终选择的方式，我们把这种方式称之为 JSONP，如果你不了解原理，先记住怎么用，多用一段时间再来看原理。

问题：

  1. JSONP 需要服务端配合，服务端按照客户端的要求返回一段 JavaScript 调用客户端的函数
  2. 只能发送 GET 请求

注意：JSONP 用的是 script 标签，更 AJAX 提供的 XMLHttpRequest 没有任何关系！！！

jQuery 中使用 JSONP 就是将 dataType 设置为 jsonp其他常见的 AJAX 封装 库：

  • Axios

2.2. CORS

Cross Origin Resource Share，跨域资源共享

// 允许远端访问
header('Access‐Control‐Allow‐Origin: *');

这种方案无需客户端作出任何变化（客户端不用改代码），只是在被请求的服务端响应的时候添加一个 Access- Control-Allow-Origin 的响应头，表示这个资源是否允许指定域请求。

cors代码

cors.php

<?php

$conn = mysqli_connect('localhost', 'root', '123456', 'demo');

$query = mysqli_query($conn, 'select * from users');

while ($row = mysqli_fetch_assoc($query)) {
  $data[] = $row;
}

// 一行代码搞定
// 允许跨域请求
header('Access-Control-Allow-Origin: *');

header('Content-Type: application/json');
echo json_encode($data);

cors.html

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>AJAX 跨域（CORS）</title>
  <!-- Cross Origin Resource Share -->
</head>
<body>
  <script src="jquery.js"></script>
  <script>

    $.get('http://localhost/cors.php', {}, function (res) {
      console.log(res)
    })

  </script>
</body>
</html>

3. jsonp案例

Ajax 跨域_Ajax

server.php

<?php

$conn = mysqli_connect('localhost', 'root', '123456', 'test');

$query = mysqli_query($conn, 'select * from users');

while ($row = mysqli_fetch_assoc($query)) {
  $data[] = $row;
}

if (empty($_GET['callback'])) {
  header('Content-Type: application/json');
  echo json_encode($data);
  exit();
}

// 如果客户端采用的是 script 标记对我发送的请求
// 一定要返回一段 JavaScript
header('Content-Type: application/javascript');
$result = json_encode($data);

$callback_name = $_GET['callback'];

echo "typeof {$callback_name} === 'function' && {$callback_name}({$result})";

client.html

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>JSONP 客户端</title>
</head>
<body>
  <script>

    // var script = document.createElement('script')
    // script.src = 'http://localhost/jsonp/server.php'
    // document.body.appendChild(script)

    // function aaabbb (data) {
    //   console.log('1111', data)
    // }

    // var script = document.createElement('script')
    // script.src = 'http://localhost/jsonp/server.php'
    // document.body.appendChild(script)

    // function aaabbb (data) {
    //   console.log('2222', data)
    // }


    // 为每一个请求创建一个唯一的函数

    // var funcName = 'haha_' + Date.now() + Math.random().toString().substr(2, 5)

    // var script = document.createElement('script')
    // script.src = 'http://localhost/jsonp/server.php?callback=' + funcName
    // document.body.appendChild(script)

    // window[funcName] = function (data) {
    //   console.log('1111', data)
    // }


    function jsonp (url, params, callback) {
      var funcName = 'jsonp_' + Date.now() + Math.random().toString().substr(2, 5)

      if (typeof params === 'object') {
        var tempArr = []
        for (var key in params) {
          var value = params[key]
          tempArr.push(key + '=' + value)
        }
        params = tempArr.join('&')
      }

      var script = document.createElement('script')
      script.src = url + '?' + params + '&callback=' + funcName
      document.body.appendChild(script)

      window[funcName] = function (data) {
        callback(data)

        delete window[funcName]
        document.body.removeChild(script)
      }
    }


    jsonp('http://09.com/jsonp/server.php', { id: 123 }, function (res) {
      console.log(res)
    })

  </script>
</body>
</html>