内容简介：深入跨域问题 - 利用 JSONP 解决跨域 （本篇）
深入跨域问题 - 利用 JSONP 解决跨域 （本篇）
什么是跨域，在这篇文章内部就不再讲述了，本文主要着重于实现 JSONP 。
script 标签：
根据同源策略的限制，在 端口，域名，协议 这三者 一个或者多个不同的情况下 ，就会出现跨域限制。
但是， <script> 标签访问时，可以跨越这些同源策略限制，但只能使用 GET 方法：
简单例子：
JSONP 的运用十分广泛，各大网站都有使用：豆瓣，QQ音乐等；下面是 QQ音乐的 简单 JSONP 接口：
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Ajax测试</title>
</head>
<body>
<script>
function jsonCallback(data) {
console.log(data);
}
</script>
<script src="https://c.y.qq.com/qzone/fcg-bin/fcg_ucc_getcdinfo_byids_cp.fcg"></script>
</body>
</html>
直接打开此链接：
你可以看到，上述返回信息是，调用 jsonCallback() 函数，并传递 一个JSON 字符串。
打开控制台，你就可以看到：
上述实现原理：
- 利用
script标签，规避跨域，<script src="url">。 - 在客户端声明一个函数，
function jsonCallback() {}。 - 在服务端根据客户端传来的信息，查找数据库，然后返回数据并调用
jsonCallback()函数。
其中，感觉上最难的一点是，如何实现返回数据，并 调用客户端函数 ？事实上很简单，请往下看。
基本实现
在这个部分里，我们将基本实现这个流程。
客户端代码：
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Ajax测试</title>
</head>
<body>
<script>
function jsonpCallback(data) {
console.log(data);
}
</script>
<script src="http://localhost:3000"></script>
</body>
</html>
服务器端代码：
const http = require('http');
var data = { name: 'BruceLee', password: '123456' };
const server = http.createServer((request, response) => {
if (request.url === '/') {
response.writeHead(200, {
'Content-Type': 'application/json;charset=utf-8'
});
response.end( "jsonpCallback(" + JSON.stringify(data) + ")" );
}
});
server.listen(3000, () => {
console.log('The server is running at http://localhost:3000');
});
在这里，我们最后直接返回一个 字符串 给客户端， <script> 标签将直接运行 字符串 里面的内容 ！！！
这就是，基本的前后端，使用 JSONP 解决跨域问题的方案 。
JSONP 与 CORS 的对比
JSONP 是很早很成熟的解决方案，但是，只能进行 GET 请求，无法实现上传数据等操作。
反观：CORS 虽然分 预请求 和 非预请求 ，但是，无疑支持的功能是非常强大的 ！！！
以上所述就是小编给大家介绍的《深入跨域问题 - 利用 JSONP 解决跨域》，希望对大家有所帮助，如果大家有任何疑问请给我留言，小编会及时回复大家的。在此也非常感谢大家对 码农网 的支持！
猜你喜欢:
- 利用 WireShark 深入调试网络请求
- 利用 V8 深入理解 JavaScript 设计
- 深入Spring Boot：利用Arthas排查NoSuchMethodError
- 利用逆向分析与模糊测试技术深入考察Windows图形库漏洞
- Glibc堆漏洞利用基础-深入理解ptmalloc2 part1
- Glibc堆漏洞利用基础-深入理解ptmalloc2 part2
本站部分资源来源于网络，本站转载出于传递更多信息之目的，版权归原作者或者来源机构所有，如转载稿涉及版权问题，请联系我们。
网络机器人Java编程指南
美 Heaton J. / 电子工业出版社 / 2002-7 / 44.00元
这是一本研究如何实现具有Web访问能力的网络机器人的书。该书从Internet编程的基本原理出发，深入浅出、循序渐进地阐述了网络机器人程序Spider、Bot、Aggregator的实现技术，并分析了每种程序的优点及适用场合。本书提供了大量的有效源代码，并对这些代码进行了详细的分析。通过本书的介绍，你可以很方便地利用这些技术，设计并实现网络蜘蛛或网络信息搜索器等机器人程序。 适合于具有一起来看看 《网络机器人Java编程指南》 这本书的介绍吧!
