JSONP和CORS两种常见跨域方式的简单实现

方式一. JSONP实现过程

        先看代码：客户端关键代码如下，需要注意的是负责跨域的那个script标签放在callback函数的下面。

<script type="text/javascript">
    function callbackFunction(data) {
        console.log(data)
    }
</script>
<!--放在下面哦  记住-->
<script src="http://39.108.135.222/jsonp/jsonp.php?callback=callbackFunction"></script>

        服务器代码如下

<?php
header('Content-type: application/javascript');
$jsonCallback = htmlspecialchars($_REQUEST ['callback']);    //获取请求者自定义的回调函数名
$jsonData ='[{"name":"tomato","age":20},{"name":"eggplant","age":25}]';    //待返回的json数据
echo $jsonCallback . "(" . $jsonData . ")";    //输出jsonp格式的数据，即一行函数调用语句
?>

        不难看出，JSONP其实利用的就是<script>标签的src属性可以跨越同源限制从而实现了跨域。

        这种跨域方式的优点：是原理简单，兼容性好，不需要对服务器端进行操作。

缺点：但是只能get 不能post 。

方式二. CORS实现过程

        实例代码 客户端部分 （这是简单的ajax发送POST请求）

<script>
    document.querySelector('button').addEventListener('click',function() {
        var xhr = new XMLHttpRequest();//xhr.withCredentials = true;
        xhr.onreadystatechange = function () {
            if (xhr.readyState == 4) {
                if ((xhr.status >= 200 && xhr.status < 300) || xhr.status == 304) {
                    console.log(JSON.parse(xhr.responseText))
                } else {
                    alert("Request was unsuccessful: " + xhr.status);
                }
            }
        };
        xhr.open("post", "http://39.108.135.222/jsonp/cors.php", true);
        xhr.setRequestHeader("Content-type", "application/x-www-form-urlencoded");
        //xhr.setRequestHeader("Content-type", "multipart/form-data");
        xhr.send('name=tomato&age=18');
    })
       
</script>

        服务器端代码

<?php
    header( "Access-Control-Allow-Origin:*" );
    $name = $_POST['name'];
    $age = $_POST['age'];
    echo json_encode($name.' is '.$age);
?>

CORS跨域的方式最重要的是响应头的Access-Control-Allow-Origin，设置为*代表允许所有的域名请求。
还有Access-Control-Allow-Credentials :(true or false) 默认是false 意思是服务器同意接受cookie（客户机也得设置为

xhr.withCredentials = true;而且Access-Control-Allow-Origin不能设置为*）