跨域保护作为浏览器访问的基本防御手段，通常需要服务器那边同意跨域才能让浏览器正常工作。如果是动态语言，我们通常是在语言中就直接添加Access-Control-Allow-Origin:*来实现允许跨域。

但是这次项目中，小沃遇到了需要拉取远端图片的问题。简单的说，就是服务器提供一个图片的url地址，然后将这个url地址指向的图片保存在canvas中，后续再将这个canvas做toBlob或是todataurl操作存储到localStorage中或是转发给其他客户端。

但是，实际操作发现，如果浏览器与图片不在同一个域名下，canvas执行toBlob或是todataurl会报错，提示为跨域不被允许。

下面我来告诉下大家nginx解决这个问题的方法。

下面是nginx的配置文件，这里我们假设图片文件放在路径为imgs的文件夹下。

location /imgs/ {
    add_header Access-Control-Allow-Origin *;
}

这样以后这个文件夹下的所有请求，都会被nginx添加一个允许跨域的标志。因此也就可以保存图片了。

文章作者：沃航科技