审核中~
溜忙之道
首页
溜忙手册
offer之道
项目Git
写文章
登录
·
注册
登录
没有账号，去注册
注册
已有账号，去登录
博客
最经典的跨域方案jsonp
南易_站长
阅读量：12168
关注
最经典的跨域方案jsonp
### 最经典的跨域方案jsonp jsonp本质上是一个Hack，它利用`<script>`标签不受同源策略限制的特性进行跨域操作。 jsonp优点： * 实现简单 * 兼容性非常好 jsonp的缺点： * 只支持get请求（因为`<script>`标签只能get） * 有安全性问题，容易遭受xss攻击 * 需要服务端配合jsonp进行一定程度的改造 jsonp的实现： ``` function JSONP({ url, params, callbackKey, callback }) { // 在参数里制定 callback 的名字 params = params || {} params[callbackKey] = 'jsonpCallback' // 预留 callback window.jsonpCallback = callback // 拼接参数字符串 const paramKeys = Object.keys(params) const paramString = paramKeys .map(key => `${key}=${params[key]}`) .join('&') // 插入 DOM 元素 const script = document.createElement('script') script.setAttribute('src', `${url}?${paramString}`) document.body.appendChild(script) } JSONP({ url: 'http://s.weibo.com/ajax/jsonp/suggestion', params: { key: 'test', }, callbackKey: '_cb', callback(result) { console.log(result.data) } }) ```
评论
表情
发送
0
审核中~
审核中~
评论