1. 同源策略是浏览器处于安全考虑,为通信设置了“相同的域、相同的端口、相同的协议”这一限制。这让我们的ajax请求存在跨域无权限访问的问题。

  2. 同时我们发现script标签引入脚本的行为并不受同源策略的限制,但是script引入的文件会被立即执行,如果其内容不符合js语法,则会报错;

操作原理

针对以上情况,诞生了jsonp:

  1. 利用script标签的src属性来请求接口,并向接口传递一个回调函数(克服了同源问题)

  2. 接口将数据以回调函数参数的形式同回调函数一同传回;此时传回则是这样形式的一个字符串:回调函数名(数据),这样就符合js语法了(克服了script标签引入内容非js报错的问题)

实例操作

纸上得来总觉浅,绝知此事要躬行。jsonp的原理我早就倒背入流了,但是看着觉得明白,但总觉得少了点什么没抓住。所以,实际操刀试试吧。点击下载源码

下载代码后,进入some-code/jsonp-demo文件夹,该文件夹的目录为:

app.js

package.json

views

    网友评论