在前端开发中，我们经常使用canvas绘制图形并将其导出为图片。而canvas.toDataURL()方法是将canvas画布导出为base64格式的字符串的最简单方法之一。但是，当我们尝试从跨域的canvas中导出数据时，该方法会抛出一个安全例外。
这个问题的根源在于同源策略（Same-Origin Policy）。该策略限制了浏览器脚本从不同源（协议，主机和端口）的文档访问另一个文档的能力。具体来说，当我们使用toDataURL()方法从一个与当前文档不同源的canvas导出数据时，浏览器会拒绝该操作，并抛出一个安全例外。
如何避免这个问题？
有几种方法可以解决这个问题：
方法一：使用后台代理
通过后台代理将需要获取的图片转发到同源服务器上，在服务器上进行操作，然后将结果返回给前端。这样可以避免跨域请求，也可以保证数据的安全性。以下是示例代码：
-- ----
----- ------ - ------------------------------------
----- ------- - ------------------------------
--------------- -
------- -------
-------- - --------------- ------------------ --
----- ---------------- ------- ---
--
-------------- -- ----------------
---------- -- -
----- --- - --------------------------
----- - - ----------------------------
------ - ----
---------- - ------------
----------
-------------------------
---
-- ----
----- ------- - -------------------
----- ------- - -------------------
----- --- - ----------
------------------------
------------------ ----- ---- -- -
----- - ------- - - ---------
----- ----------- - ---------------------------------- ----------
--------------
---- ---------------------------------
-------- -
--------------- ------------
----------------- -------------------
--
----- ------------
-------------
---
---------------- -- -- ------------------- -- --------- -- ---- ---------方法二：使用CORS
跨域资源共享（CORS）是一种机制，允许网页从不同源服务器上请求数据。我们可以在响应头中添加Access-Control-Allow-Origin字段来指定允许跨域请求的源。以下是示例代码：
-- ---- ----- ------- - ------------------- ----- --- - ---------- -------------------------------- - ------------ ----------------- ----- ---- -- - ----- ------ - ----------------- ----- ----- --- - ------------------------ ------------- - ---------- --------------- -- ---- ----- ----- ------ - ------------------ ----------------------------- ------------- -------------------------------------------- ----- ----------------- --- ---------------- -- -- ------------------- -- --------- -- ---- ---------
-- ----
----- ------ - ------------------------------------
----- --- - ------------------------
------------- - ----------
--------------- -- ---- -----
----- ------- - ------------------------------
----- --- - --- -----------------
--------------- -------------------------------
---------- - ---------- -
----- ---- - -------------
----- --- - --------------------------
----- --- - --- --------
---------- - ---------- -
------------------ -- ---
-------------------------
--
------- - ----
--
---------------- - -------
-----------结论
在前端开发中，我们通常会遇到跨域问题。要解决这个
来源：JavaScript中文网 ，转载请注明来源 本文地址：https://www.javascriptcn.com/post/11398