vue中webpack中跨域请求proxyTable代理的配置

在vue项目的 config/  文件夹下的 index.js 文件里的 dev ，写入如下代码

方便你复制~~~~

    // 配置proxy跨域请求代理
    proxyTable: {
      // url中匹配到 '/api' 就会吧url中 '/api' 之前的东西全部替换为下面target中的东西
      '/api': {
        target: 'http://172.20.1.139:8080',  //目标接口域名
        changeOrigin: true,  //是否跨域
        // secure: false,  // 如果是https接口，需要配置这个参数
        // pathRewrite: {
        //   '^/api': '/'   //重写接口
        // }
      }
    },

1、实现

使用vue搭建的项目在本地与后端联调时，因为是使用node运行服务器，IP与后端不一致，所以会产生跨域问题，需要使用如JSONP、跨域代理等手段进行跨域请求，而vue已经帮我们配置好了，只需要设置一下proxyTable就行。

2、proxyTable原理

浏览器是禁止跨域的，但是服务端不禁止，在本地运行npm run dev等命令时实际上是用node运行了一个服务器，因此proxyTable实际上是将请求发给自己的服务器，再由服务器转发给后台服务器，做了亦曾代理，因为不会出现跨域问题。