一、跨域问题引入
在之前写心理测试网站时，由于心理测试的题目内容还未拿到，所以先用本机的数据接口尝试渲染页面，而之前自己在学后台技术时，为了配置了虚拟主机，在电脑上部署了多个站点，所以就导致心理测试网站与本机的数据接口不是同源地址，即进行了跨域请求，浏览器提示如下错误：
<!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的原理进行了说明，标准写法将在下一篇文章的进行介绍
网友评论