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