手写JSONP方法
近期重温了网盘存有的黑马视频,里面讲到了Jsonp方法,突发奇想,我也写一个Jsonp方法来跨域请求到Node服务器拿到的Mysql里的数据,废话不多说,立马开始!
Jsonp原理
首先什么是Jsonp呢,Jsonp(JSON with Padding)是JSON的一种“使用模式”,可用于解决主流浏览器的跨域数据访问的问题。
我们在日常使用中可以注意到,img标签可以引入其他网站的图片,也就是在src属性上可以请求不同源地址从而拿到图片,还有link标签的href属性以及script标签的src属性等。Jsonp就是利用这一特性,利用script标签实现跨域请求,下面我做点小例子。
我在node服务器写了个简单的例子
node.js
var http = require('http');
http.createServer(function(request, response) {
// 因为我们是利用script标签的src请求这个接口地址http://127.0.0.1:8081/,所以我们需要设置响应头为js格式
response.writeHead(200, {
'Content-Type': 'application/javascript' });
//然后返回js格式代码回去
response.end('var a=1');
}).listen(8081);
console.log('Server running at http://127.0.0.1:8081/');
请求端
text.html
<body>
<script src="http://127.0.0.1:8081/"></script>
<script>
</script>
</body>
请求端地址和明显和接口地址http://127.0.0.1:8081/是不同源地址
然后我们在控制台输出a发现a的值为1,说明接口返回的’var a = 1’,我们拿到了
所以jsonp利用这一特性,动态创建script标签,在src属性放入想要请求的不同源地址,然后在请求端创建一个函数