谷歌跨域插件_spa项目解决数据联调跨域的两方案

方案之一： whisle与chrome插件switchyOmega 简介：不依赖于后端部署Index.html到测试服务器。 启动本地服务，代理本地服务到服务端域名。 然后代理服务端接口增加接口目录在做一次接口的代理，防止服务端域名被两次代理影响。 两步代理解决不依赖后端的本地项目开发跨域调用接口问题。

第一步：

1. 通过npm 安装whistle
2. 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

第三步：开启代理如上图

第四步：

本地把localhost 换成后端域名访问即可 http://后端域名/

备注：

2. 记得安装chrome插件switchyOmega

3. 偶现： chrome会自动将http转成https

需要设置一下，才能使用http访问测试环境

chrome://net-internals/#hsts

从这里删除掉即可

方案之二：通过XSwitch（谷歌浏览器插件），配置静态文件的代理 简介：依赖于后端部署Index.html到测试服务器。 启动本地服务，把后端服务器上的index.html访问的静态资源文件代理到localhost即可，达到访问服务端域名，访问本地静态资源，进行本地开发。解决跨域问题

配置demo如下：

第一步，把打包build下的Index.html给后端同学放到服务器上，并问后端同学要到访问此页面的地址。

第二步配置后端测试环境的HOST

第三步，把代码中的路由模式改为hash模式

注意：如果是history模式，则页面空白

const router = new VueRouter({
    mode: 1 ? "hash" : "history",
    routes
});

第四步，访问项目域名，即可，修改本地静态文件，跨域访问接口。实时看效果。

小贴士：

检验是否静态资源代理成功：

访问：//static.xx.com/xxx/vendor.dll.js 是否会被重定向到 http://localhost:8081/vendordev.dll.js

如果被重定向，说明代理成功。