webpack中跨域请求proxy代理(vue与react脚手架不同设置方法)

因为浏览器有同源策略的限制，导致我们在本地开发的时候，请求不同域名的接口会存在跨域的问题

解决跨域的问题有很多方式，这里主要整理下代理模式来解决跨域的问题

代理方式能够实现的机制大体：

本地服务器 --》 代理 --》目标服务器 --》拿到数据后通过代理伪装成本地服务请求的返回值 ---》浏览器收到返回的数据

一、vue脚手架

vue  基于 vue init webpack my-project 构架的脚手架（https://github.com/vuejs-templates/webpack）

在项目目录中找到根目录下config文件夹下的index.js文件 官方文件目录：https://github.com/vuejs-templates/webpack/blob/develop/template/config/index.js

可以看到 proxyTable

关于proxyTable 是利用 http-proxy-middleware 插件来完成的

配置代码

proxyTable: {
     '/api': {
        target: 'http://api.xxx.com', // 目标接口域名
        changeOrigin: true, // 是否跨域
        pathRewrite: {
          '^/api': '/'   // 重写接口
        }
     }
},