webpack中跨域請求proxy代理(vue與react腳手架不一樣設置方法)

由於瀏覽器有同源策略的限制，致使咱們在本地開發的時候，請求不一樣域名的接口會存在跨域的問題

解決跨域的問題有不少方式，這裏主要整理下代理模式來解決跨域的問題

代理方式可以實現的機制大致：

本地服務器 --》 代理 --》目標服務器 --》拿到數據後經過代理假裝成本地服務請求的返回值 ---》瀏覽器收到返回的數據

1、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': '/'   // 重寫接口
        }
     }
},