|
本地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的配置 或者 图片服务器的白名单噢~
|