JS - 跨域请求 CORS 与 JSONP - 作业笔记

1.跨域请求

CORS:跨域资源共享
CSRF：跨站请求伪造

1.1 JS 默认遵循同源策略

多个页面的 协议，域名，端口 完全相同，则认为他们遵循了同源策略
同源策略是一种安全机制
浏览器禁止通过脚本发起跨域请求，如XMLHttpRequest但允许通过html标签属性跨域

php 文件

<?php
echo sha1(1);

如果 php 文件与当前页在同一域名下则允许访问

  <button>跨站请求</button>
    <h2></h2>
    <script>
      //   按钮被单击跨站请求;
      var btn = document.querySelector("button");
      btn.addEventListener(
        "click",
        function () {
          //   创建异步请求
          var xhr = new XMLHttpRequest();
          //    监听返回值
          xhr.onreadystatechange = function () {
            if (xhr.readyState === 4 && xhr.status === 200) {
              console.log(xhr.responseText);
              document.querySelector("h2").innerHTML = xhr.responseText;
            }
          };
          // 初始化请求参数  同一域名
          xhr.open("get", "test.php", true);
          // 发送请求
          xhr.send(null);
        },
        false
      );

如果不在

// 初始化请求参数  不同域名
xhr.open("get", "http://php11.edu/0522/test.php", true);

则会提示你禁止跨域

如果你非要跨域，也不是没有办法在 PHP 文件头部添加代码

<?php
header("Access-Control-Allow-Origin:http://js.edu");
echo sha1(1);

跨域成功

2. JSONP

同源策略禁止通过脚本发起跨域请求, 但是允许通过标签和属性发起一个跨域
也就是我们可以在<script src = ""></script> src 属性上下功夫，比如在 js 中写好方法，加载 src 时调用该方法并传参

php 部分

<?php
// 获取到id
$id = $_GET['id'];
$users = [
    '{"name":"Jerry", "email":"Jerry@qq.com"}',
    '{"name":"John", "email":"John@qq.com"}',
    '{"name":"Amy", "email":"Amy@qq.com"}',
];
 // 循环输出
switch ($id) {
    case '1':
        echo "handle(". json_encode($users[0]).")";
        break;
    case '2':
        echo "handle(". json_encode($users[1]).")";
        break;
        case '3':
        echo "handle(". json_encode($users[2]).")";
        break;
}

js 部分

  <button>JSONP跨站请求</button>
    <script>
      // 先创建一个方法
      function handle(jsonData) {
        console.log(jsonData);
        // 解析json
        var data = JSON.parse(jsonData);
        console.log(data);
        // 接接口返回值渲染到页面
        var ul = document.createElement("ul");
        ul.innerHTML += "<li>姓名:" + data.name + "</li>";
        ul.innerHTML += "<li>邮箱: " + data.email + "</li>";
        // 插入页面中
        document.body.appendChild(ul);
      }
      //   点击按钮发起基于JSONP的跨域请求
      var btn = document.querySelector("button");
      btn.addEventListener(
        "click",
        function () {
          // 创建一个标签
          var script = document.createElement("script");
          // 给标签的src赋值
          script.src = "http://php11.edu/0522/handle.php?id=1";
          // 将标签插入head中
          document.head.appendChild(script);
        },
        false
      );
    </script>

3. 基于 JSONP 简单做一个查询功能

index.html

<!DOCTYPE html>
<html lang="zh-CN">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <link rel="stylesheet" href="style.css" />
  </head>
  <body>
    <h2>查询员工信息</h2>
    <form action="" onsubmit="return false">
      <div>
        <input
          type="text"
          name="msg"
          placeholder="type your message"
          required
        />
        <select name="type">
          <option value="id">id</option>
          <option value="name">name</option>
          <option value="mobile">mobile</option>
          <option value="position">position</option>
          <option value="age">age</option>
        </select>
      </div>
      <button>查询</button>
    </form>
  </body>
  <script>
    //   获取按钮 和 表单
    var btn = document.querySelector("button");
    var select = document.querySelector("select");
    var input = document.querySelector("input");
    var head = document.querySelector("head");
    var body = document.querySelector("body");
    // 按钮被单击
    btn.addEventListener(
      "click",
      function () {
        var head_script = document.querySelectorAll("head > script");
        // 先检测head中有没有script
        if (head_script.length !== 0) {
          // 全部删除
          for (var i = 0; i < head_script.length; i++) {
            head.removeChild(head_script[i]);
          }
        }
        // 判断如果input有值插入script标签
        if (input.value !== ""){
          var script = document.createElement("script");
          script.src =
                  "handle.php?action=" + select.value + "&value=" + encodeURIComponent(input.value);
          document.head.appendChild(script);
        }
      },
      false
    );
    // 创建函数
    function handle(jsonDate) {
    // 先检测有没有table 有的话删除
      var table = document.querySelectorAll("body > table");
      if (table.length !== 0) {
        // 全部删除
        for (var i = 0; i < table.length; i++) {
          body.removeChild(table[i]);
        }
      }
      // 创建table
      var table = document.createElement("table");
      // 首行
      table.innerHTML += "<tr><th>id</th><th>name</th><th>mobile</th><th>position</th><th>age</th></tr>";
// 判断输出
      if (jsonDate.message === 0){
        // 0 = 没找到
        table.innerHTML += "<tr><td colspan='5'>"+jsonDate.value+"</td></tr>"
      }else {
        // 找到返回多维数组 
        for (var i = 0; i < jsonDate.value.length; i++) {
          table.innerHTML += "<tr>" + "<td>" + jsonDate.value[i]['id'] + "</td>" + "<td>" + jsonDate.value[i]['name'] + "</td>" + "<td>" + jsonDate.value[i]['mobile'] + "</td>" + "<td>" + jsonDate.value[i]['position'] + "</td>" + "<td>" + jsonDate.value[i]['age'] + "</td>" + "</tr>"
        }
      }
// 插入
      document.body.appendChild(table);
    }
  </script>
</html>

handle.php

<?php
//先判断有没有get
if (empty($_GET)){
    die("非法请求");
}
//获取GET值
$action = $_GET['action'];
//value值需要解码
$value = urldecode($_GET['value']);
//创建一个查询函数
function sel($where,$value){
    $pdo = new PDO('mysql:host=localhost;dbname=php11.edu','php11.edu','php11.edu');
    $stmt = $pdo->prepare("SELECT * FROM `staffs` WHERE `{$where}`='{$value}'");
    $stmt->execute();
//    获取多维数组
   $value = $stmt->fetchAll(PDO::FETCH_ASSOC);
//   检测返回是否是空数组
   if (!empty($value)){
       return ["message"=>1,"value"=>$value];
   }else{
       return ["message"=>0,"value"=>"员工不存在或输入错误"];
   }
}
echo "handle(".json_encode(sel($action,$value)).")";

演示地址 http://php.rc238.cn/0523/

4. 总结

意外发现php json编码后的数组刚好是js的对象字面量前端不用解码直接可以用

JS - 跨域请求 CORS 与 JSONP

1.跨域请求

1.1 JS 默认遵循同源策略

2. JSONP

3. 基于 JSONP 简单做一个查询功能

4. 总结

相关文章