Webpack proxy工作原理

一、proxy是什么？

proxy是Webpack提供的代理服务，用来解决本地开发时的跨域问题（浏览器安全策略限制），实现的基本方式就是接收客户端的请求后转发到目标服务器。

二、实现原理

​ 在开发阶段中，webpack-dev-server会启动一个本地开发的服务器，即跨域所使用的代理服务器，通过利用http-proxy-middleware代理中间件，代理服务器会响应本地请求，继而转发到目标服务器，目标服务器响应数据后再将数据返回给代理服务器，代理服务器再将数据返回给本地。

​ 在此阶段中不涉及任何跨域问题，因为代理服务器跟本地同源，而服务器之间不存在跨域问题，跨域问题是浏览器安全策略限制。

三、使用

module.exports = {
  devServer: {
    proxy: {
      // 第一种写法
      '/api': 'http://www.baidu.com' // 本地发送localhost:8080/api请求,相当于请求http://www.100tal.com/api
      
      // 第二种写法
      '/api': {
      	target: 'http://www.baidu.com',
      	pathRewrite: {'^/api': ''},  // 本地发送localhost:8080/api/user请求,相当于请求http://www.100tal.com/user
    		secure: false,	// 是否支持https
    		changeOrigin: true, // 表示是否更新代理后请求的 headers 中host地址，设置为true之后，headers中host地址为target值
    	},
    }
		// 第三种写法
		proxy: [
      {
        // 多路径代理到同一目标，即发送/auth或/api请求，均会转发至http://www.100tal.com
        context: ['/auth', '/api'],
        target: 'http://www.baidu.com'
      }
    ]
  }
}