使用图片跨域方式获取图片数据使用 jsonp 方式跨域获取数据

Posted 2021-03-10

tags:

篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了使用图片跨域方式获取图片数据使用 jsonp 方式跨域获取数据相关的知识，希望对你有一定的参考价值。

使用图片跨域方式获取图片数据


server.get(`/mockImg`, (req, res, next) => { // 使用图片跨域方式获取图片数据
  req.headers.origin && res.setHeader(`Access-Control-Allow-Origin`, req.headers.origin)
  res.setHeader(`content-type`, `image/gif`)
  res.setHeader(`data`, `image/gif`)
  var b64string = \'R0lGODlhAQABAIAAAAUEBAAAACwAAAAAAQABAAACAkQBADs=\'
  var buf = Buffer.from(b64string, \'base64\');
  res.send(buf)

  function getImgBase64(api) {
    return new Promise((resove, reject) => {
      var img = new Image();
      img.setAttribute(\'crossorigin\', \'anonymous\')
      img.onload = () => {
        function getBase64Image(img) {
          var canvas = document.createElement(\'canvas\')
          var ctx = canvas.getContext(\'2d\')
          ctx.drawImage(img, 0, 0)
          return canvas.toDataURL()
        }
        resove(getBase64Image(img))
      }
      img.onerror = err => reject(err)
      img.src = api
    })
  }
  // getImgBase64(`http://localhost:9001/api/t/mockImg`)
})

使用 jsonp 方式跨域获取数据


server.get(`/jsonp`, (req, res, next) => { // 使用 jsonp 方式跨域获取数据
  const {cb} = require(\'querystring\').parse(req.url.replace(/.*\\?/, \'\'))
  res.send(`${cb}({a:1})`)
  function jsonp(api, cb) { // 从 jsonp 中获取数据
    return new Promise((resove, reject) => {
      const cbName = `jsonp${Date.now()}${String(Math.random()).slice(2)}`
      window[cbName] = res => {cb && cb(res); resove(res)}
      const src = `${api}${api.includes(\'?\') ? \'&\' : \'?\'}cb=${cbName}`
      const script = document.createElement(\'script\')
      script.setAttribute(\'crossorigin\', \'anonymous\')
      script.src = src
      script.onload = () => {
        const script = document.querySelector(`script[src*="${cbName}"]`)
        script.remove()
        delete window[cbName]
      }
      script.onerror = err => reject(err)
      document.body.append(script)
    })
  }
  // jsonp(`http://localhost:9001/api/t/jsonp`)
})

以上是关于使用图片跨域方式获取图片数据使用 jsonp 方式跨域获取数据的主要内容，如果未能解决你的问题，请参考以下文章

使用图片跨域方式获取图片数据 使用 jsonp 方式跨域获取数据

使用图片跨域方式获取图片数据

使用 jsonp 方式跨域获取数据

使用图片跨域方式获取图片数据使用 jsonp 方式跨域获取数据