【disableHostCheck】本地项目遇到图片跨域怎么解决？

本地vue项目遇到图片跨域怎么解决？常规的方法我就不说了，啥配置图片服务器设置，nginx代理都不说了，下面来说个重点

disableHostCheck： 本地项目代理到指定域名下

1、情景假设 

举个例子：你图片地址是 http://lindadayo.com，然后你本地项目地址是 localhost:80/home，当你想要去用该图片做一些canvas操作时，就会发现跨域，这个时候很多童鞋就会将远程图片下载保存到本地再引用，或者让服务端改一些配置，那这样就会很麻烦，图片识别跨域的方法就是判别请求时候的请求头部的Referer地址，那把Referer改成和图片同源下的地址不就行了吗，所以就是将你本地启动的项目地址，比如： localhost/home代理成 lindadayo/home ，这样你去获取图片时候，就不会跨域了

2、操作步骤 

2.1、C:\Windows\System32\drivers\etc 下的hosts => 属性 => 安全：更改Users的权限编辑：新增 修改 权限（这样你就有权限对hosts文件进行修改）

2.2、 在hosts文件里 新增 127.0.0.1 lindadayo.com （当然这里lindadayo.com是我举的例子，你可以将它改成你图片服务器能够允许跨域的域名地址）

2.3、修改完后打开你的cmd终端，输入 ipconfig /flushdns （用于刷新主机dns缓存）

2.4、在你vue项目里，vue.config.js 文件下 devServer 新增属性 disableHostCheck ，并设置为true，并且 将你 devServer的 port 属性设置为 80 （disableHostCheck 用于配置是否关闭用于 DNS 重绑定的 HTTP 请求的 HOST 检查。 devServer 默认只接受来自本地的请求，关闭后可以接受来自任何 HOST 的请求， port 设置为 80， 是因为80为默认端口）

2.5、记得vue.config.js修改后，要重新启动项目噢，以前你的启动地址为 localhost:80/home，现在就是 lindadayo:80/home 了噢（你在本地的所有更改，都是热更新到这个地址的，意思就是只有项目启动地址改了，其他的都还是一样的，代码都是同步热更新）

3、疑难问题解答

3.1、你上面五个步骤我都执行了，但是为啥 提示我找不到这个地址呢？404？

要记住最重要一步喔，输入 ipconfig /flushdns，而且一定要先修改了hosts，再刷新dns

3.2、我已经项目代理完成了，这个时候不想用了，而且本地项目也关了，那为啥再去访问代理地址会报错呢？

举例子: hosts文件 127.0.0.1 baidu.com

代理完成后，再去访问baidu.com，其实还是你刚刚被代理的本地项目地址，所以当你不用代理的时候，记住一定要在hosts文件里注释掉，并且dns刷新噢~

3.3、那能否用于线上生产环境呢？

不行噢，因为修改是在vue.config.js 的devServer配置项的，所以只在本地开发环境有效，想解决生产环境的跨域问题，还是只有去修改nginx的配置 或者 图片服务器的白名单噢~