vue腳手架配置代理

vue.config.js配置具體代理規則

module.exports = {
	devServer: {
      proxy: {
      '/api1': {	// 匹配所有以 '/api1'開頭的請求路徑
        target: 'http://localhost:5000',	// 代理目標的基礎路徑
        changeOrigin: true,
        pathRewrite: {'^/api1': ''}		//訪問時替換帶有/api1的路徑部分
      },
      '/student': {
        target: 'http://localhost:5001',
        changeOrigin: true,
        pathRewrite: {'^/student': ''}	
          /*
          訪問http://localhost:8080/student/getInfo時真實訪問的地址是						  				http://localhost:5001/getInfo
          */       	
      }
    }
  }
}
/*
   changeOrigin設置為true時，服務器收到的請求頭中的host為：localhost:5000
   changeOrigin設置為false時，服務器收到的請求頭中的host為：localhost:8080
   changeOrigin默認值為true
*/

說明：

1. 優點：可以配置多個代理，且可以靈活的控制請求是否走代理。
2. 缺點：配置略微繁瑣，請求資源時必須加前綴。