1. 引言

在前端开发过程中，我们经常会遇到跨域的问题。那什么是跨域呢？跨域其实就是不符合浏览器的同源策略（协议，域名，端口都要相同，这里不进行详细描述，如需深入了解请自行百度）。在项目开发过程中，我们经常在开发环境中通过开启代理模式去解决接口的跨域调用，那在一些特殊场景中需要调用本地资源，调用外部资源时会跨域那怎么办呢？近日我在使用html2Canvas就遇到了这个问题。

2. 问题描述

由于接到了需要自定义生成海报功能，所以在项目中加入了html2Canvas插件。在使用html2Canvas这个插件时，正常编写html，然后自定义生成海报。一开始是正常的，但是在加入图片时就出现了异常，图片无法正常渲染。打开控制台，报了以下错误：

3. 解决办法

在研究了之后发现是由于canvas本身设计就是默认加载本地资源，对于跨域资源是默认不加载的。知道了是由于跨域的原因，那就好办了。解决跨域的问题就行了。这里列举网上找到的一些解决办法：

$\color{red}{1.将图片资源转为base64格式，这样子就没有跨域问题了}$

$\color{red}{2.配置html2Canvas插件的useCORS属性为true，同时给img标签新增crossorigin="anonymous"}$

$\color{red}{3.将图片作为背景图，不要使用img标签}$

以上是我在网上找到的一些方法。但是我感觉总差了点什么，还有没有别的办法呢？一时间没有啥思路，那就先上个厕所吧，程序员的思路都是上厕所过程中出来的😎 。上完厕所，突然想到我们的nginx服务器不就是用来做转发的吗？既然是跨域问题，那在nginx配置上加个路径匹配自动转发不就可以解决跨域问题了？说干就干。首先，需要在nginx配置文件上添加路径匹配自动转发，

nginx相关代码为：

location /baidu.com/   //用来做匹配的路径
  {
    proxy_pass https://www.google.com/;    // 需要转发的路径
  }

项目相关代码为：

export const proxyUrl = (url) => {
  if (!url) {
    return ''
  }
  let newUrl = url.replace('http://', '/').replace('https://', '/')
  return newUrl
}

上面主要是使用proxyUrl方法使图片路径自动拼接到当前域名下，然后通过nginx转发到指定对于的文件服务器地址上，这样子就可以避免跨域问题了。例如你的文件路径是baidu.com/a/b.png, 当前项目域名为b.com, 那么经过proxyUrl方法就会把文件资源路径改为：b.com/baidu.com/a… 经过nginx自动转发到baidu.com/a/b.png。这样子就可以完美解决前端文件资源跨域问题。这个方法不仅适用于html2Canvas插件的图片跨域问题，同时也适用其它文件资源跨域场景。

4. 总结

解决前端文件资源跨域的问题有很多种方法，没有最优解，但是有最适合自己的方法。具体使用哪种方法还是要根据实际情况去选择。在使用的过程中我们也可以多思考，是否有更合适自己的方法。以上就是我对前端文件资源跨域的一些个人见解，如果有小伙伴还有更好的办法也欢迎在评论区附上自己的见解，大家一起进步~~~

前端文件资源跨域的“奇淫技巧“

1. 引言

2. 问题描述

3. 解决办法

4. 总结