在config/index.js中：

proxyTable:  {
      '/api': {
        target: 'http://localhost:8083/',//设置你调用的接口域名和端口号 别忘了加http
        changeOrigin: true,    //這裡true表示实现跨域
        pathRewrite: {
          '^/api':'/'//这里理解成用‘/api’代替target里面的地址，后面组件中我们掉接口时直接用api代替 比如我要调用'http://40.00.100.100:3002/user/add'，直接写‘/api/user/add’即可
        }
      }

发送请求

this.$axios
        .get("/api/selectall")
        .then(res => {
          this.list = res.data.result;
          // }
        })
        .catch(e => {
          console.log(e);
        });
        },

对于代理的理解:

代理分为：

正向代理： 靠近客户端，隐藏客户端IP，服务器不知道请求从哪里来的

反向代理： 靠近服务器, 隐藏服务器IP，客户端不知道是谁响应的数据

匿名代理以及透明代理

实际应用中：

devServer在开发环境下生效，启动webpack-dev-server就会在本地开启一个服务器，port: 指定服务器监听的端口号，host: 指定使用的host(还可以指定为0.0.0.0让本地服务器可以被外部访问)，allowedHosts指定允许访问服务器的白名单，hot启动热更新，open设置服务器启动后自动打开默认浏览器等。

运行h5项目，port默认8080，host默认localhost，自动打开http://localhost:8080/，本地服务器访问的是放在电脑内存里的编译好的静态资源首页，除了访问静态资源外，还需要处理动态请求：

请求直接从localhost:8080 到真正的开发服务器或测试环境，由于协议、主机、端口的不同，浏览器受同源策略的限制会报跨域错误。

属性proxy可代理请求，之前说本地开发服务器监听着8080端口，当端口接受到api请求后，由本地的服务器把请求转发到真正的开发服务器或测试环境，真正的服务器把数据传给本地服务器，本地服务器再给传回浏览器，服务器和服务器之间没有跨域就可以解决问题

本地服务器内部具体处理为：

image.png

'/api'指定哪些请求需要被代理，‘/api’匹配以/api开头的请求， ‘/’匹配所有请求，context: ['/auth', '/api']匹配以/api或/auth开头的请求
pathRewrite重写路径，如果上面createProxyMiddleware中增加 "pathRewrite: { '^/api': ' ' }",最后的请求是'http://www.example.org/foo/bar'
changeOrigin如果指定为true，覆盖主机头，后端通过 request.getHeader("Host")获取到的就是target。指定为false，后端通过 request.getHeader("Host")获取到的还是localhost