前言
前端開發在合成二維碼海報時，經常會使用html2canvas工具將二維碼和海報合成一張圖片。
如果合成用的海報是項目本地圖片，那沒什麼問題。
但是如果合成海報的圖片，是後臺傳過來的線上圖片，那麼就很可能由於跨域問題導致合成的線上圖片是空白，只有二維碼。報錯如下：
這時，聰明的你肯定想到了既然如此，那我們提前將需要合成的海報轉換成base64不就ok了嗎？
於是你開始鼓搗img圖片轉base64的方法，同時還參考各路資料，避免踩下canvas調用toDataURL時的跨域問題。
可是結果在本地開發環境調試時卻啪啪打臉，這熟悉的描述，是跨域的味道。
vue項目中，我們一般通過proxyTable來解決開發環境跨域問題，可是該設置僅能代理接口請求。因此，這裏我們需要用到nginx來進行反向代理設置。
項目背景：本項目中圖片的線上地址和項目地址是同一服務器環境，所以不擔心線上跨域問題。這裏主要解決開發環境下的跨域問題，便於以後開發。
一、下載安裝nginx
可以參考我之前的文章——傳送門
該文章簡單介紹瞭如何使用nginx反向代理解決接口請求跨域問題。
但是沒有針對靜態資源跨域方案處理。
二、將線上地址的圖片寫成相對路徑。
示例，這裏我們有一個線上的圖片地址：https://testsd.cicd.vpclub.cn/group1/M00/00/1D/hlDQGl4BsZyAcl8DAAHennb2ZYk525.png
將其主機名去除，寫成相對路徑。
其實這樣就相當於是請求項目本地的圖片資源，當然 也就不存在跨域問題了！
但是問題來了，這樣的圖片是加載不出來的，因爲本地根本沒有該資源。不慌，接下來又輪到nginx出場了。
三、設置nginx反向代理，匹配圖片資源。
下圖紅框處，前面2段 location是用於匹配接口請求，紅框處的location則是用於匹配對應的字體，圖片等資源。
將匹配到的資源，通過proxy_pass設置被代理服務器的地址，爲我們前面正確的線上地址。
四、啓動nginx，打開代理端口查看效果。
啓動nginx後，打開本地開發項目，同時將端口替換成nginx服務器的端口。
發現轉換成功！
參考資料：
1、canvas圖片問題淺析
2、解決nginx下加載eot|otf|ttf|woff|svg等404 錯誤問題