微信公众号讲师中心

首页

文章

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

专题

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

AI工具

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

学习

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

编程手册

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

下载

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

搜索

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

首页 > 博客列表 > JS基础-跨域请求

博主信息

博文 58

粉丝 3

访问量 76698

专题推荐

更多>

跨域请求

1. CORS

CORS : 跨域资源共享
CSRF : 跨站请求伪造
- 用户在访问A网站, 此时用户在A网站的信息记录在Cookie中, 假设A网站没有对Cookie做同源策略限制, 此时如果有B网站的链接嵌入到A网站中, 用户点开了该链接后, 跳转到B网站, 假设B网站是不怀好意的网站, 那么B网站的所有者就能获取到A网站的Cookie, 然后使用Cookie以该用户的身份去访问A网站.
- 产生跨站伪造的原因就是网站没有遵循同源策略

1.2. 同源策略

多个页面的协议, 域名, 端口完全相同, 则认为他们遵循了同源策略.
- 协议: 要么是http, 要么是https等.
- 域名: 多个页面的域名要完全相同. www.php.cn 和 www.php.net 是不同的!
- 端口: 要么是80, 要么是443, 或者都是别的, 必须相同.
同源策略是一种安全机制, 浏览器禁止通过脚本发起跨域请求, 如: XMLHttpRequest , Fetch API 等. 但是允许HTML标签属性跨域. 即, 可以用 <a> 标签或 <img> 发送跨域请求或跨域访问.
- 当使用脚本发起跨域请求时, 浏览器会提示禁止跨域.
- 此时, 若目标网站允许跨域, 则需要在跨域请求的目标请求头指定允许跨域访问自己的站点: header('Access-Control-Allow-Origin: http://php11.edu'). 记得一定要指定协议
  - 若不指定允许跨域访问的站点, 那么这个站点将是非常不安全的. 即, 不要这样设置: header('Access-Control-Allow-Origin: *')

1.3. JSONP跨域

虽然同源策略不允许脚本发起跨域请求, 但是并不阻止HTML标签的属性发起. JSONP就是使用HTML标签的属性发起跨域请求的方式.

<script src="把需要跨域的脚本URL写到这里发起一个跨域请求">
</script>

实战案例

1. 通过HTML标签属性跨域

浏览器允许通过标签属性跨域

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>通过HTML标签属性跨域</title>
</head>
<body>
    <img src="https://img.php.cn/upload/image/234/213/408/1590257532837910.png" alt="球员列表" style="width: 400px;"><br>
    <a href="https://www.baidu.com">访问百度</a><br>
    <button type="button">发送跨域请求</button>
</body>
</html>

2. CORS跨域请求

php.edu站点的文件php.edu/0522/test1.php中设置允许站点php11.edu跨域

<?php
// 指定允许http://php11.edu站点跨域访问当前文件
header('Access-Control-Allow-origin: http://php11.edu');
echo '跨域请求返回的数据';
// 刷新缓冲区
flush();

php11.edu站点的php11.edu/js/0522/demo1.html使用ajax发起跨域访问请求

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>CORS跨域</title>
</head>
<body>
    <button type="button">发送跨域请求</button>
    <script>
        var btn = document.querySelector('button');
        btn.addEventListener('click', function() {
            // 通过ajax发送一个跨域请求
            var xhr = new XMLHttpRequest();
            xhr.onreadystatechange = function() {
                if(xhr.readyState === 4 && xhr.status === 200) {
                    console.log(xhr.responseText);
                }
            }
            xhr.open('GET', 'http://php.edu/0522/test1.php', true);
            xhr.send(null);
        });
    </script>
</body>
</html>

成功获取到数据

3. JSONP跨域

php.edu站点中负责获取请求,并执行查询,调用回调函数.

<?php
// 这里返回json数据, 而json只支持utf8编码
header('content-type: text/html;charset=utf-8');
// 模拟根据id值获取数据, 并调用回调函数处理数据
// 获取请求参数(jsonp指定一个回调函数名)
$callback = $_GET['jsonp'];
$id = $_GET['id'];
// 返回的处理结果数组
$res = [
    'status' => '1',
    'message' => '查询成功',
];
// 判断id值是否有效
if(!filter_var($id, FILTER_VALIDATE_INT, ['option' => ['min_range' => 1]])) {
    $res['status'] = '0';
    $res['message'] = 'ID值无效';
}
// 连接数据库
$pdo = new PDO('mysql:host=localhost;dbname=phpedu;charset=utf8;port=3306', 'root', 'root');
// 查询
$stmt = $pdo->query("SELECT * FROM `player` WHERE `id` = {$id}");
// 判断是否查到值
if(!$stmt || $stmt->rowCount < 1) {
    // 没查到的处理
    $res['status'] = '0';
    $res['message'] = 'ID值无效';
} else {
    // 查到数据
    $res['data'] = $stmt->fetch(PDO::FETCH_ASSOC);
}
// 打印回调
echo $callback . '(' . json_encode(json_encode($res)) . ')';

php11.edu中通过JSONP发送跨域请求

<!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>发送跨域请求</button>
    <script>
        /* 1. 被当做参数值传给跨域的目标站点, 目标站点echo "调用该函数的字符串", 
        相当于在当前站点执行该函数调用 */
        function handle(jsonData) {
            // console.log(jsonData);
            // json=>js对象
            var res = JSON.parse(jsonData);
            // 约定状态值为0表示查询结果异常
            if(res.status === '0') {
                alert(res.message ?? '查询失败');
                return;
            }
            // 渲染数据
            var ul = document.createElement('ul');
            ul.innerHTML += "<ul>姓名: " + res.data.name + "</ul>";
            ul.innerHTML += "<ul>球队: " + res.data.team + "</ul>";
            ul.innerHTML += "<ul>身高: " + res.data.height + "</ul>";
            ul.innerHTML += "<ul>体重: " + res.data.weight + "</ul>";
            ul.innerHTML += "<ul>位置: " + res.data.position + "</ul>";
            document.body.appendChild(ul);
        }
    </script>
    <script>
        /* 2. 给按钮增加点击事件, 生成一个跨域请求的script标签 */
        var btn = document.querySelector('button');
        btn.addEventListener('click', function () {
            // 生成一对<script>标签
            var script = document.createElement("script");
            // 为script标签的src属性赋予一个跨域请求的url, 并带上handle函数作为回调
            script.src = "http://php.edu/0522/test2.php?jsonp=handle&id=1";
            // 把生成的标签加到head标签中
            document.head.appendChild(script);
            // 相当于在head标签中生成了下面的标签, 然后就能自动发起跨域请求了
            // <-script src="http://php.edu/0522/test2.php?jsonp=handle&id=1"><-/script>
    }, false);
    </script>
</body>
</html>