一、跨域问题引入

在之前写心理测试网站时，由于心理测试的题目内容还未拿到，所以先用本机的数据接口尝试渲染页面，而之前自己在学后台技术时，为了配置了虚拟主机，在电脑上部署了多个站点，所以就导致心理测试网站与本机的数据接口不是同源地址，即进行了跨域请求，浏览器提示如下错误：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>AJAX跨域请求</title>
</head>
<body>***</body>
<script src="../jquery-1.12.1.js"></script>
<script>
    $.ajax({
        url: 'http://first.com/Camp/data_prepare/list.php', //first.com是本机数据接口域名
        type: 'GET',
        success: function(res){
            console.log(res);
        },
        error: ()=>console.log('服务器连接失败')
    })
</script>
</html>

AJAX跨域请求失败

二、同源策略

上一节中提到心理测试网站与本机的数据接口不是同源地址，那么什么是同源呢？所谓同源是指协议，域名，端口完全相同，它描述的是两个地址之间的关系，以http://www.example.com/detail.html为例，感受一下什么是同源：

同源地址对比

不同源地址之间请求我们称之为跨域请求，而在浏览器中有一种安全策略，叫同源策略，它要求只有同源的地址才可以相互通过AJAX 的方式请求。因此我才请求本机数据端口时就是使用AJAX进行了跨域请求，导致浏览器报错。
其实我们可以通过开发者工具的Network看到，浏览器虽然报错，但还是接收了数据接口的响应内容，只不过我们不能拿到响应内容，如下图所示：

AJAX跨域请求

三、跨域方法--JSONP

JSONP并不是唯一解决跨域问题的办法，这里只是从原理上谈论为什么JSONP可以解决跨域问题。在之前文章(https://www.jianshu.com/p/7da68374add5)中总结过目前可以请求服务端数据的方法，而img、link、script和iframe标签可以在界面时自动发送不同源请求，那么我们可否通过这些标签对服务端的响应进行响应进行操作呢？

3.1 img标签

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>尝试找到一种可以发送不同源请求的方式</title>
</head>
<script src="../jquery-1.12.1.js"></script>
<body></body>
<script>
    // img link script iframe  自动向服务器发送请求
    // 校验目标： 1.能发送请求  2.能接收响应

    // 1.img--可以发送不同源地址的请求，但看不到响应体
    var img = new Image();
    //这里没有使用ajax技术
    img.src = 'http://first.com/Camp/data_prepare/list.php';
    $(document.body).append(img);
</script>
</html>

img标签跨域请求

img拿不到响应内容

从结果可以看到img标签可以进行跨域请求，但是看不到响应体。这是我们使用img标签请求，浏览器会按照二进制的方式理解响应内容，但实际返回的是字符串，所以没有办法拿到响应结果------淘汰该方法。

3.2 link标签

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>尝试找到一种可以发送不同源请求的方式</title>
</head>
<script src="../jquery-1.12.1.js"></script>
<body></body>
<script>
    // img link script iframe  自动向服务器发送请求
    // 校验目标： 1.能发送请求  2.能接收响应

    // 2. link---href属性发送请求
    var link = $("<link rel='stylesheet' href='http://first.com/Camp/data_prepare/list.php'>");
    $(document.body).append(link);
</script>
</html>

link标签

link标签同样也能跨域请求，同时在浏览器中还可以看到相应内容，但是js中没有方法可以拿到外部引入的样式表内容，因此link标签仍不能拿到响应内容---淘汰

3.3 script标签

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>尝试找到一种可以发送不同源请求的方式</title>
</head>
<script src="../jquery-1.12.1.js"></script>
<body></body>
<script>
    // img link script iframe  自动向服务器发送请求
    // 校验目标： 1.能发送请求  2.能接收响应

    // 3.script
    var script = $("<script src='http://first.com/demo2.php'><script>");//这里换了一个不同源地址
    $(document.body).append(script); //发起请求
</script>
</html>

考虑到script标签可以作为js进行执行，所以这里我将数据接口的响应格式设置为JavaScript同时内容以变量进行返回：

<?php 
    header("Content-Type: application/javascript");
    $json = json_encode(array(
    'time'=> time()
    ));
    echo "var a = {$json}"
?>

那么此时我们就可以在浏览器通过输入a拿到响应内容了！！！！

script相应内容作为变量返回

但此时还是存在缺陷，因为请求是异步进行的，所以我们不能直接在index.html中使用a变量。那么我们如果先定义一个函数，在数据接口返回时执行呢？

<?php 
    header("Content-Type: application/javascript");
    $json = json_encode(array(
    'time'=> time()
    ));
    echo "foo({$json})"
?>

在原index.html中添加foo函数定义：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>尝试找到一种可以发送不同源请求的方式</title>
</head>
<script src="../jquery-1.12.1.js"></script>
<body></body>
<script>
    // img link script iframe  自动向服务器发送请求
    // 校验目标： 1.能发送请求  2.能接收响应

    // 3.script
    var script = $("<script src='http://first.com/demo2.php'><script>");//这里换了一个不同源地址
    $(document.body).append(script); //发起请求

    //添加foo函数定义
    function foo(res){
        console.log(res);
    };
</script>
</html>

执行结果：

script结果跨域问题

这个方法就是现在大家常用的JSONP，当然一个标准的JSONP写法肯定不是这样，这里只是对JSONP的原理进行了说明，标准写法将在下一篇文章的进行介绍

AJAX跨域问题以及JSONP原理