内容简介:深入跨域问题 - 利用 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
本站部分资源来源于网络,本站转载出于传递更多信息之目的,版权归原作者或者来源机构所有,如转载稿涉及版权问题,请联系我们。
产品经理面试宝典
[美] Gayle Laakmann McDowell、[美]Jackie Bavaro / 吴海星、陈少芸 / 人民邮电出版社 / 2015-3 / 59.00元
本书针对IT 行业产品经理,以面试为主线,首先介绍产品经理职责以及谷歌、微软等知名企业中产品经理的作用和要求;然后采访了几位知名企业的产品经理,介绍成为产品经理的基本素质;之后从简历准备、各公司面试要点到具体面试问题进行详细分析,这部分是本书的重点内容。读者对象包括IT 行业产品经理以及对如何做好产品有兴趣的人士。一起来看看 《产品经理面试宝典》 这本书的介绍吧!