14跨域 - jsonp

Posted 2021-02-07 O_Geek_O

## 同源策略

协议 域名 端口    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)
})