内容简介：深入跨域问题 - 利用 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 解决跨域》，希望对大家有所帮助，如果大家有任何疑问请给我留言，小编会及时回复大家的。在此也非常感谢大家对 码农网 的支持！
本站部分资源来源于网络，本站转载出于传递更多信息之目的，版权归原作者或者来源机构所有，如转载稿涉及版权问题，请联系我们。
Persuasive Technology
B.J. Fogg / Morgan Kaufmann / 2002-12 / USD 39.95
Can computers change what you think and do? Can they motivate you to stop smoking, persuade you to buy insurance, or convince you to join the Army? "Yes, they can," says Dr. B.J. Fogg, directo......一起来看看 《Persuasive Technology》 这本书的介绍吧!
JSON 在线解析
在线 JSON 格式化工具
HEX HSV 转换工具
HEX HSV 互换工具