跨域请求

CORS: 跨域资源共享
JSONP:通过标签和属性发起一个跨域
同源策略：多个页面协议、域名、端口完全一样
同源策略: 针对脚本，不针对标签
如果服务器上脚本设置允许访问，则可以访问，允许访问请求头header('Access-Control-Allow-origin: // + 允许访问的域名')

1、CORS 演示代码：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Ajax-GET</title>
    <!--从后端拿数据到前端-->
</head>
<script>
    // 1. 创建Ajax对象
    var xhr = new XMLHttpRequest();
    // 2. 监听请求
    xhr.onreadystatechange = function () {
        if (xhr.readyState === 4 && xhr.status === 200) {
            console.log(xhr.responseText);
        }
    };
    // 3. 初始化请求参数
    xhr.open("GET", "http://php.io/0518/test1.php", true);
    // 4. 发送请求
    xhr.send(null);
</script>
<body>
<button>CORS跨域请求</button>
<h2></h2>
</body>
</html>

演示效果截图：

2、JSONP 演示代码：

请求返回的数据通过回调函数来处理

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>跨域请求-JSONP</title>
</head>
<body>
<button>跨域请求-JSONP</button>
</body>
<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.io/0518/test2.php?jsonp=handle&id=3";
            document.head.appendChild(script);
        }, false);
</script>
</html>

<?php
// 这里返回的是JOSN格式，只支持utf-8，要设置字符集
header('content-type:text/html;charset=utf-8');
$callback = $_GET['jsonp'];
$id = $_GET['id'];
// 根据查询条件返回不同内容
$users = [
    '{"name":"admin", "email":"admin@php.cn"}',
    '{"name":"alam", "email":"alam@php.cn"}',
    '{"name":"oanh", "email":"oanh@php.cn"}',
];
if(array_key_exists(($id-1), $users)) {
    $user = $users[$id-1];
}
$json = '{"title":"用户信息", "user":'.$user.'}';
echo $callback .'('.json_encode($json).')';

演示效果截图：

总结

两种常用跨域请求方式，CORS 操作相对简单，但是不一定能用，需要服务器允许。JSONP操作相对复杂，但是没有限制。

实例演示跨域请求（CORS、JSONP）

跨域请求

1、CORS 演示代码：

2、JSONP 演示代码：

总结

相关文章