跨域请求的原理（CORS/JSONP） - PHP第11期作业

微信公众号讲师中心

首页

文章

后端开发 web前端数据库开发工具 php框架常见问题科技 Java 系统教程电脑教程硬件教程手机教程软件教程游戏教程自媒体新闻

专题

后端开发 web前端数据库开发工具 php框架科技 Java 系统教程电脑教程硬件教程手机教程软件教程游戏教程新闻

AI工具

AI 聊天问答 Agent智能体 AI 文本写作 AI 绘画作图 AI 设计工具 AI 视频创作 AI 音频制作 AI 办公学习 AI 编程开发 Prompt指令

学习

大前端后端开发数据库移动端运维开发计算机基础

编程手册

大前端后端开发数据库移动端运维开发计算机基础

下载

js特效网站源码工具下载类库下载网站素材学习资源插件扩展手机/移动开发手机游戏

搜索

后端开发 web前端数据库开发工具 php框架常见问题科技 Java 系统教程电脑教程硬件教程手机教程软件教程游戏教程

首页 > 博客列表 > 跨域请求的原理（CORS/JSONP）

博主信息

博文 43

粉丝 1

访问量 43191

专题推荐

更多>

一、跨域资源共享 CORS。

CORS是一个W3C标准，全称是”跨域资源共享”（Cross-origin resource sharing）。它允许浏览器向跨域服务器，发出XMLHttpRequest请求，从而克服了AJAX只能同源使用的限制。CORS需要浏览器和服务器同时支持。整个CORS通信过程，都是浏览器自动完成，不需要用户参与。

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
  </head>
  <body>
    <button>跨域请求-CORS</button>
    <h2></h2>
    <script>
      var btn = document.querySelector("button");
      btn.addEventListener(
        "click",
        function () {
          // 1. 创建Ajax对象
          var xhr = new XMLHttpRequest();
          // 2. 监听请求
          xhr.onreadystatechange = function () {
            if (xhr.readyState === 4 && xhr.status === 200) {
              console.log(xhr.responseText);
              document.querySelector("h2").innerHTML = xhr.responseText;
            }
          };
          // 3. 初始化请求参数
          xhr.open("GET", "http://php.edu/0522/test1.php", true);//"test1.php"在另外一个服务器上
          // 4. 发送请求
          xhr.send(null);
        },
        false
      );
    </script>
  </body>
</html>

输出效果：

test1.php

<?php
header('Access-Control-Allow-Origin:http://js.edu');
header('content-type:text/html;charset-utf-8');
echo '跨域脚本返回的数据';
flush();

二、跨域资源共享 JSONP。

JSONP是服务器与客户端跨域通信的常用方法。它的基本思想是，网页通过添加一个<script>元素，向服务器请求JSON数据，这种做法不受同源策略限制，服务器收到请求后，将数据放在一个指定名字的回调函数里传回来。

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>跨域请求-JSONP</title>
  </head>
  <body>
    <button>跨域请求-JSONP</button>
    <script>
      // 1. 准备好回调处理函数
      function handle(jsonData) {
        console.log(jsonData);
        var data = JSON.parse(jsonData);
        console.log(data);
        // 将接口返回的数据渲染到页面中
        var ul = document.createElement("ul");
        ul.innerHTML += "<li>" + data.title + "</li>";
        ul.innerHTML += "<li>姓名:" + data.user.name + "</li>";
        ul.innerHTML += "<li>邮箱:" + data.user.email + "</li>";
        document.body.appendChild(ul);
      }
      // 2. 点击按钮发起一个基于JSONP的跨域请求
      var btn = document.querySelector("button");
      btn.addEventListener(
        "click",
        function () {
          var script = document.createElement("script");
          script.src = "http://php.edu/0522/test2.php?jsonp=handle&id=3";
          document.head.appendChild(script);
        },
        false
      );
    </script>
  </body>
</html>

test2.php

<?php
//这里返回的是json,json只支持utf8
header('content-type:text/html;charset=utf-8');
$callback = $_GET['jsonp'];
$id = $_GET['id'];
//模仿接口，根据查询条件返回不同的内容
$users = [
    0=>'{"name":"admin","email":"admin@php.cn"}',
    1=>'{"name":"lulu","email":"lulu@php.cn"}',
    2=>'{"name":"anna","email":"anna@php.cn"}',
];
if (array_key_exists(($id-1),$users)) {
    $user = $users[$id-1];
}
$json = '{
    "title":"用户信息表",
    "user":'.$user.'
}';
echo $callback . '('. json_encode($json) . ')';

输出效果：

三、总结

1.同源策略是针对脚本发出请求的,不针对标签,所以比如img标签可以跨域。
2.JSONP只能发送GET请求，而CORS支持所有类型的HTTP请求。
3.实现CORS通信的关键是服务器，只要服务器实现了CORS接口，就可以跨域通信。
4.CORS与JSONP的使用目的相同，但是比JSONP更强大。
5.JSONP支持老式浏览器，以及可以向不支持CORS的网站请求数据。

批改老师：