码迷,mamicode.com
首页 > Web开发 > 详细

14、跨域 - jsonp

时间:2019-01-30 19:58:39      阅读:168      评论:0      收藏:0      [点我收藏+]

标签:支持   return   frame   pos   doc   main   data   end   mes   

## 同源策略
协议 域名 端口    3个都一致叫同域,有1个不一致叫跨域
 
## 为什么浏览器不支持跨域
cookie LocalStorage
DOM元素也有同源策略    iframe
ajax 也不支持跨域
 
## 实现跨域
-  jsonp
-  cors
-  postMessage
-  document.domain    子域和父域
-  window.name    
-  location.hash
-  http-proxy    反向代理
-  nginx
-  websocket 
 
jsonp方式:
function jsonp({url, params, cb}) {
  return new Promise((resolve, reject) => {
    const script = document.createElement(‘script‘)
    window[cb] = (data) => {
      resolve(data)
      document.body.removeChild(script)
    }
    params = {...params, cb}    // wd=b&cb=show
    let arrs = []
    for (let key in params) {
      arrs.push(`${key}=${params[key]}`)
    }
    script.src = `${url}?${arrs.join(‘&‘)}`
    document.body.appendChild(script)
  })
}
// 缺点:只能发送get请求
// 不安全 xss攻击 不采用
jsonp({
  url: ‘https://sp0.baidu.com/5a1Fazu8AA54nxGko9WTAnF6hhy/su‘,
  params: {wd: ‘b‘},
  cb: ‘show‘
}).then(data => {
  console.log(data)
})

 

14、跨域 - jsonp

标签:支持   return   frame   pos   doc   main   data   end   mes   

原文地址:https://www.cnblogs.com/zouxinping/p/10339450.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!