纯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 @   灰色的修饰  阅读(264)  评论(0编辑  收藏  举报
编辑推荐:
· 基于Microsoft.Extensions.AI核心库实现RAG应用
· Linux系列:如何用heaptrack跟踪.NET程序的非托管内存泄露
· 开发者必知的日志记录最佳实践
· SQL Server 2025 AI相关能力初探
· Linux系列:如何用 C#调用 C方法造成内存泄露
阅读排行:
· 无需6万激活码!GitHub神秘组织3小时极速复刻Manus,手把手教你使用OpenManus搭建本
· Manus爆火,是硬核还是营销?
· 终于写完轮子一部分:tcp代理 了,记录一下
· 别再用vector<bool>了!Google高级工程师:这可能是STL最大的设计失误
· 单元测试从入门到精通
主题色彩
点击右上角即可分享
微信分享提示