方案之一: whisle与chrome插件switchyOmega 简介:不依赖于后端部署Index.html到测试服务器。 启动本地服务,代理本地服务到服务端域名。 然后代理服务端接口增加接口目录在做一次接口的代理,防止服务端域名被两次代理影响。 两步代理解决不依赖后端的本地项目开发跨域调用接口问题。
第一步:
- 通过npm 安装whistle
- whistle -v 查看是否成功。
第二步:
安装chrome插件switchyOmega
然后W2 start 启动
http://127.0.0.1:8899/ 通过它访问whistle
进行如下配置,并开启代理
http://服务端域名/接口约定目录 http://后端服务IP/接口约定目录
http://服务端域名 http://127.0.0.1:8082(本地IP与端口)
#如下的不需要配置
#http://xxxxx/ http://localhost:8082/img/
#post 配置跨域的方式
#http://xxx/api resHeaders://jsonp
![0b395240f6ac325ee5e6728daf6675fd.png](https://i-blog.csdnimg.cn/blog_migrate/017d334b99f357d3090c6c8d4ed2c66e.jpeg)
第三步:开启代理如上图
第四步:
本地把localhost 换成后端域名访问即可 http://后端域名/
备注:
2. 记得安装chrome插件switchyOmega
3. 偶现: chrome会自动将http转成https
需要设置一下,才能使用http访问测试环境
chrome://net-internals/#hsts
![d446106319670c177240a0697fefaa66.png](https://i-blog.csdnimg.cn/blog_migrate/ab37162f33559decdb27fef525dab057.jpeg)
从这里删除掉即可
方案之二:通过XSwitch(谷歌浏览器插件),配置静态文件的代理 简介:依赖于后端部署Index.html到测试服务器。 启动本地服务,把后端服务器上的index.html访问的静态资源文件代理到localhost即可,达到访问服务端域名,访问本地静态资源,进行本地开发。解决跨域问题
配置demo如下:
![b9efe6e51ded0d35a204186ab4cd4eaf.png](https://i-blog.csdnimg.cn/blog_migrate/3dd8b83b2dffa08024dc7cc80e040b65.jpeg)
第一步,把打包build下的Index.html给后端同学放到服务器上,并问后端同学要到访问此页面的地址。
第二步配置后端测试环境的HOST
第三步,把代码中的路由模式改为hash模式
注意:如果是history模式,则页面空白
![7de7739ba237793f79f5e4b9203246dc.png](https://i-blog.csdnimg.cn/blog_migrate/a88f0c7ba4a70522177b9c16eca3896f.png)
const router = new VueRouter({
mode: 1 ? "hash" : "history",
routes
});
第四步,访问项目域名,即可,修改本地静态文件,跨域访问接口。实时看效果。
小贴士:
检验是否静态资源代理成功:
访问://static.xx.com/xxx/vendor.dll.js 是否会被重定向到 http://localhost:8081/vendordev.dll.js
如果被重定向,说明代理成功。