使用nginx解决开发环境下canvas的toDataURL转换线上地址图片时的跨域问题。

前言

前端开发在合成二维码海报时，经常会使用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 错误问题