使用html2Canvas生成图片跨域如何处理？

1.出现跨域的情况

这种情况只会出现在html2Canvas需生成的海报中的图片与当前环境不在同一个域下

2.解决方案

处理跨域，将接口返回的url处理为base64再进行处理或者后端直接返回base64

3.如何将url转换为base64？（利用canvas的toDataURL属性将url转为base64）

  function getImageBase64Data(imgSrc) {

    function getBase64(img) {

      let canvas = document.createElement("canvas")

      canvas.width = img.width

      canvas.height = img.height

      let ctx = canvas.getContext("2d")

      ctx.drawImage(img, 0, 0, canvas.width, canvas.height)

      let dataURL = canvas.toDataURL('image/jpeg')

      return dataURL

    }

    let baseUrl = new Promise(function (resolve, reject) {

      let image = new Image()

      image.crossOrigin = '*'// 图片处理跨域

      if (imgSrc.indexOf('data:image/jpegbase64') >-1) {

        image.src = imgSrc + '?v=' + Math.random()// 处理图片从缓存获取

      } else {

        image.src = imgSrc

      }

      image.onload = function () {

        let imageBase64Data = getBase64(image)

        resolve(imageBase64Data)

      }

    })

    return baseUrl

  }

4.使用html2Canvas生成海报

  const download = () => {

    let content = document.getElementById('promote-content')

    if (content) {

      html2canvas(content, { useCORS: true, allowTaint: true }).then(res => {

        const imgBase64 = res.toDataURL('image/jpeg')

        let link = document.createElement('a')

        link.style.display = 'none'

        link.href = imgBase64

        link.setAttribute('download', name + moment().format('YYYYMMDDHHmm'))

        document.body.appendChild(link)

        link.click()

        document.body.removeChild(link)

      })

    }

  }

前端web开发html避免js的跨域访问的方法是后台服务端做域配置兼容处理。

1、在server端请求过滤的时候加入以下控制：

<httpProtocol>

<customHeaders>

<add name="Access-Control-Allow-Origin" value="*" />

</customHeaders>

</httpProtocol>

Access-Control-Allow-Origin这个属性配置成*就表示接受任何域过来的请求

2.ajax中请求如下：

$.ajax({

xhrFields: {

withCredentials: true

},

data:{ my: 'a' },

url: 'http://MyApp/Page', 这里是跨域访问

type: 'POST'

})

浏览器出于安全方面的考虑，只允许客户端与本域（同协议、同域名、同端口，三者缺一不可）下的接口交互。不同源的客户端脚本在没有明确授权的情况下，不能读写对方的资源，这被称为同源策略。

而有时候，我们不得不在一个客户端下访问不同域中的资源，于是需要用到一些方法来避开浏览器的同源策略，这些方法被称为跨域。

实现跨域有如下几种方法：

JSONP（JSON with Padding）是数据格式JSON的一种使用模式，可以使网页实现跨域请求。其原理主要利用了 HTML 的 script 标签。由于 script 是采用开放策略，通过设置 src 引入不同域下的资源，所以可以通过 script 实现跨域，该方法需要后端支持。jsonp跨域的实现步骤如下：

下面来做个演示，首先为演示方便，将系统的hosts做如下修改：

以上例子最终实现了由example.a.com到example.b.com的跨域。应注意的是，因为 <script>只能发送GET请求，所以jsonp只能实现GET请求的跨域。如果希望能实现其他请求的跨域，就可以用接下来介绍的一种方法——CORS。

CORS（全称为：Cross-Origin Resouce Sharing）跨域资源共享，是一种通过ajax跨域请求资源的方法。浏览器将CORS请求分为两大类，简单请求（simple request）和非简单请求（not-so-simple request，浏览器对这两种请求的处理方式不一样。如果请求满足以下两个条件，则为简单请求。

简单请求的实现方式即当用XMLHttpRequest发请求时，浏览器如果发现该请求不符合同源策略，会给该请求加上一个请求头origin，origin用来说明本次请求来自哪个源（协议+域名+端口）。如果origin指定的源不在后台允许范围内，后台会返回一个正常的HTTP响应，然后浏览器会发现该响应头部信息不包含Access-Control-Allow-Origin字段，然后抛出一个错误，该错误被XMLHttpRequest的onerror函数捕获，响应被驳回，但因为该错误无法通过状态码识别，所以HTTP回应的状态码还是200。如果origin在后台允许范围内，则服务器返回的响应，会包含Access-Control-Allow-Origin：Origin（指定的源）信息，浏览器此时不会抛错，响应能正常处理。

非简单请求是是请求方法为PUT或DELETE，又或者Content-Type为application/json的对服务器有特殊要求的请求。非简单请求的CORS请求，会在正式通信前增加一次HTTP查询，称为预检（preflight），询问服务器当前网页所在域名是否在服务器的许可名单中，如果在，则发出正式的XMLHttpRequest，之后就与简单请求一样，不在则报错。

依旧用上面的例子。

最终实现的效果与第一个jsonp的例子一样。

还有一种方式，就是通过降域来实现跨域。即通过设置document.domain的方式，将两个域名的domain设置为一个，如对于a.example.com和b.example.com，可以通过js设置 document.domain = "example.com" ，实现跨域。

做个演示，假设在 http://a.example.com:8080 下有一个a.html文件，其中a.html中有一个 iframe ，它的 src 为 http://b.example.com:8080/b.html 。

用降域方法实现跨域 *** 作简单，但是有一些缺点。比如域名只能往下设置，不能回去，比如从example.com回到a.example.com。同时如果一个子域名被攻击，多个被降域的域名都会被连带攻击，有很大的安全风险。

postMessage是一个web API，可以实现跨域通信。 window.postMessage() 被调用时，会在所有页面脚本执行完毕后，向目标窗口派发一个 MessageEvent 消息。语法如下：

MessageEvent 具有如下属性：

用一个与上面降域类似的例子来做演示。同样有两个页面a.html和b.html，a.html中的 iframe 的 src 指向b.html。

最终实现a.html与b.html通信效果如下：

使用postMessage方法应注意的是，如果不希望从其他网站接收message，那么不要为message事件添加任何监听器。如果确实希望接收其他网站的message，那么应该始终使用origin和source属性来验证发件人的身份，以免被恶意的网站攻击。

以上就是几种常见的跨域方法，各有优劣，且各自都有一定的安全问题，在日常应用中，需要有针对性的使用，对可能的安全风险采取相应措施。

---