react和vue配置本地代理

　　React

　　在react中配置開發環境下的本地代理相對比較簡單，直接在package.json文件中修改即可。

　　但是這樣做有其局限性，如果開發中代理多個接口的時候將無法滿足需求，我們需要的是下面這種的能夠代理多個接口的請求方式

proxy('/back', {

  target: 'http://172.20.1.148:8082',

  changeOrigin: true

})

　　1）：安裝http-proxy-middleware管理包，npm i http-proxy-middleware --save

　　2）：在項目目錄的src /下新建setupProxy.js文件，然后寫入如下代碼：

const proxy = require(‘http-proxy-middleware‘);

module.exports = function(app) {
  app.use(proxy(‘/api‘, { 
       target: ‘http://192.168.1.144:8181‘ ,
       secure: false,
       changeOrigin: true,
       pathRewrite: {
        "^/api": "/"
       },
       // cookieDomainRewrite: "http://localhost:3000"
    }));
};

　　Vue

　　vue配置本地代理，在項目根目錄創建vue.config.js

module.exports = {
    devServer: {
        open: true,

        https: false,

        hotOnly: false,
        proxy: { //設置代理
            '/api': {
                target: 'http://192.168.000.129',
                host: '192.168.000.129',
                changeOrigin: true,
                pathRewrith: {
                    '^/api': '/'
                }
            },
             '/lyg':{
                 target:'http://192.168.000.108:8090/',
                 host:'192.168.000.108',
                 changeOrigin:true,
                 pathRewrith:{
                     '^/lyg':'/'
                 }
             }
        },
        port:8000,
    },
}

　　以上是vue，react配置本地代理的些許方法。如有疏漏，歡迎探討