扯一下jsonp

好久没有写blog了,最近实在是好忙啊。上周在研究朱一的插件代码 时,发现了原来可以用jsonp来解决跨域问题,而且解决方法非常巧妙,而且,优酷就是这么干的。

####首先,为什么会有跨域问题?

因为由浏览器的同源策略,所以从client端发出的ajax请求,只能请求这个网站的服务器。简单来说,就是ajax的request的前半部分是这个http://www.currentsite.com/。如果要请求别的域名下的服务,浏览器会弹错误信息。

####那么,关于script标签
script标签是个好东西,url里的domain是啥都行。正因如此,一些前端共用库比如jquery都会直接用cdn上的,一来提升用户的访问速度,二来节省了自己服务器的流量。比如百度的共用库

####最后说说jsonp
所谓的jsonp就是利用script标签的无跨域问题的特性实现跨域请求。但需要服务端的配合。

####一个栗子
服务端代码,用于接收ajax请求,返回一个json:

1
2
3
4
5
6
7
8
9
10
from bottle import route, request

json = "{\"a\" = \"1\"}"
callback = "callback("

@route('/data')
def get_data():
if len(request.query['__callback']) != 0:
callback = request.query['__callback'] + "("
return callback + json + ")"

浏览器代码,

1
<script url ="http://mydomain.com/data?__callback=run_callback" />

至此完结。

####script得到的是什么?

1
2
run_callback("{\"a\" = \"1\"}")
// 哇,竟然将json传到某function里去了

1
2
3
function run_callback(data){
console.log(data['a'])
// ...

是不是很巧妙!!!

####最后来个实际的栗子

话说其实优酷就是通过jsonp接口来跨域获取视频信息。

try it~

http://v.youku.com/player/getPlaylist/VideoIDS/XNjc1MjQwNTQ4/Pf/4?__callback=abcdefg

####最后有一个邪恶的想法
那利用这个接口+解真实地址的方法得到mp4格式的地址不就可以实现,无缝盗链了吗。。。

邪恶想法实践,使用的是jquery封装的jsonp,直接播放优酷的视频without ad.

avatar

lelouchcr's blog