Ⅰ 在vue项目中配置proxy解决跨域问题
1.问题：
后端给的接口是：https://stg-pteppp.leanapp.cn/h5/jsconfig.前端在本地开发中调用该接口跨域。
2.解决方案：
* 在webpack中配置proxy。如下图所示
如上：
1. target是你要代理的域名，必须要加上http。
2. 这里用'/api'代替target里面的地址，组件中调用接口时直接用'/api'代替。比如我要调用'https://xxx.com/news.直接写'/api/news'即可
3. changeOrigin必须为true
* 在页面中请求写法如下：
开心吧。数据终于拿到啦！！！
我们知道，vue2.0项目中的static文件夹存储的是静态资源，可以直接被访问到的，如果我们将mock的数据放入static文件夹，在浏览器中直接访问http://localhost:8080/static/json/list.json发现是可以访问到数据的。于是我们在页面将mock数据的请求写成下面这样：
则需要在webpack中做如下配置：
注意这里的http一定不能省略，否则数据请求不到。这样做的好处是在本地开发时mock的接口和线上的接口一致，避免上线前大量改动接口名称。
Ⅱ vue在浏览器刷新后显示代理错误
vue在浏览器刷新后显示代理错雹丛误的原因是前端项目路由配置的时候路由的用了丛肆兄history模渗袭式。根据查询相关公开信息，路由的模式改了，之后重新打包发到服务器。
Ⅲ vue前端工程代理之后怎么查看请求接口的真实url呢
项目启动以后按F12 点选Network然后点击 XHR 就是所有的后端接口地址，然后点击一个访问的地址，右边出现headers里面的 Request URL 后面的就是真实的url地址了
Ⅳ vue-配置代理解决跨域
我们需要向一台服务器上上传图片，接口是 " http://xxxx.xxx.xx/file/upload_img ",直接向这台服务器请求上传图片将会产生跨域问题，我们这里有两种解决方式
1.让后台帮忙配置,一下是node实橘罩现
2.前端配置代理（在前端请郑伍激求node服务器，node服务器再帮我们发送真正的请喊袜求）
Ⅳ vue 前端设置跨域多代理
在项目开发的时候经常会遇到后端提供的多个服务请求地址域名或端口号不一致的情况这时候就需要前端设置多个proxy跨域代理，本文以vue-element-admin为例展示步骤如下：
1: 配置环境变量 .env.development
2: 配置项目根目录下的vue.config.js 找到devServer
PS：注意VUE_APP_BASE_API 放在数组的最后一个，如果你VUE_APP_BASE_API跟我一样设置为'' 的话，这样才不会被代理的虚拟path覆盖！
3: 找到项目中管理请求地址的文件 src/api/proxy.js （proxy.js 是我随便起的名字😄）
打开proxy.js
proxy_api 就是你之前在步骤1：中定义的虚拟path
VUE_APP_BASE_API_PROXY = '/proxy-api'
const url = (path) => (proxy_api + path) 一个路径处理函数，参数是'/xx/xxx/fetch/list'，return (proxy_api + path)
需要额外注意的是我在配置环境变量 .env.development的时候基础api设置的是空：
所以不需要在src/utils/request.js 中对代理的请求进行拦截
如果你为VUE_APP_BASE_API设置了虚拟path路径，那么就需要在src/utils/request.js为这个虚拟路径配置拦截，比较麻烦比不建议这么做。
至此跨域多代理已经设置完了，本文中设置两个代理一个基础代理VUE_APP_BASE_API，一个额外代理VUE_APP_BASE_API_PROXY，默认情况下走基础代理，当请求匹配到匹'/proxy-api' 时走额外代理～