webpack使用中间件设置后端代理的两种方式

1. webpack代理
一般在跨域获取第三方接口数据时使用该种代理模式

 	// webpack.dev.config.js中创建代理（可创建多个代理）
    const axios = require('axios')
    devSever {
      before (app) {
        // 可通过代理名称在js中使用代理
		app.get('/代理名称', function (req, res) {
		  	var url = '请求的代理地址'
			axios.get(url, {
				headers: {
					// 设置代理服务器和代理域名
					referer: '代理服务器',
					host: '域名'
				},
				// 需要注意，请求参数为req.quey而不是req
				// 请求参数由使用该代理的js方法传入
				params: req.query
			}).then((respone) => {
			    // js方法请求ajax数据后，通过后端代理对数据进行json解析，再返回数据到方法中
				res.json(respone.data)
			}).catch((e) => {
			  	console.log(e)
			})
		})
	  }
    }
    
	// 业务代码
    // 使用代理方法获取数据
    import axios from 'axios'
    
    export function 方法名 () {
    	const url = '代理名称'
    	const data = {}
			
		// 通过代理请求数据
		return axios.get(url, {
			params: data
		}).then((res)  => {
			return Promise.resolve(res.data)
		})
    }
    
  

2. http-proxy-middleware 代理
一般在同一服务器下开发环境中接口联调时使用（跨域）

  // build/index.js中创建代理
  dev {
  	proxyTable: {
  	   // 代理名称 可通过该代理名称来使用代理
  	  '/api': {
  	  	// API服务所在IP及端口号
  	  	target:'http://www.baidu.com/api',
  	  	// 如果是https接口，需要配置这个参数
  	  	secure: false,
  	  	// 如果需要跨域，需要配置这个参数
  	  	// 如果设置为true,那么本地会虚拟一个服务器接收你的请求并代你发送该请求，这样就不会有跨域问题（只适合开发环境）
  	  	changeOrigin: true,
  	  	// 重写路径
  	  	// '^/api': '/api'  这种接口配置出来   http://XX.XX.XX.XX:8083/api/login
  	  	// '^/api': '/'    这种接口配置出来     http://XX.XX.XX.XX:8083/login
  	  	pathRewrite: {
          '^/api': '/'
        }
  	  }
  	}
  }

  // 业务代码
  import axios from 'axios'
  
  export function 方法名 () {
	const url = '代理名称/接口地址'
  	axios.get(url, {
      params: {
	    // 参数
	  }
    }).then(function(res) {
      console.log(res);
    }).catch(function(err) {
      console.log(err);
    });
  }

当jsonp不能请求到跨域数据时，可以使用以上两种代理模式
以上两种方式都是作为中间件代理，获取数据使用axios，需要注意的是，axios不支持jsonp