Loading

Loading

纯JS实现跨域发送请求

function fetch(opts) {
  const ifm = document.createElement('iframe')
  const script = document.createElement('script')
  const js = `
  document.domain = window.top.location.hostname
  window.onmessage = async (e) => {
      const w = window.parent
      const data = e.data
      const res = await fetch(data)
      w.postMessage({type: 'fetch', data: res})
  }
  function fetch(opts) {
      return new Promise((resolve, reject) => {
          const xhr = new XMLHttpRequest()
          xhr.open(opts.method, opts.url)
          xhr.onload = e => {
              try {
                  resolve({
                      success: true,
                      result: JSON.parse(xhr.responseText)
                  })
              } catch(e) {
                  reject({
                      success: false,
                      result: xhr.responseText
                  })
              }
          }
          xhr.onerror = e => reject(e)
          let data = null
          try {
              data = opts.data && JSON.stringify(opts.data) || null
          } catch(e) {}
          xhr.send(data)
      })
  }
  `
  script.innerHTML = js
  document.body.appendChild(ifm)
  ifm.style.display = 'none'
  const w = ifm.contentWindow
  w.document.body.appendChild(script)
  w.postMessage(opts)
 return new Promise((resolve, reject) => {
     window.onmessage = e => resolve(e.data)
 })
}

示例:

  const res = await request({url: 'http://164.red:8002', method: 'get'})
posted @ 2021-09-01 18:07  灰色的修饰  阅读(263)  评论(0编辑  收藏  举报