3.webpack proxy工作原理

1.什么是webpack proxy？

即webpack提供的代理服务器

基本行为就是接受客户端发送的请求后转发给其他服务器

其目的是为了方便开发者在开发模式下解决跨域问题

2.使用方式

// ./webpack.config.js
const path = require('path')
module.exports = {
  // ...
  devServer: {
    contentBase: path.join(__dirname, 'dist'),
    compress: true,
    port: 9000,
    proxy: {
      '/api': {
        target: 'https://api.github.com'
      }
    }
    // ...
  }
}

通过以上设置可以允许所有以api开头的请求跨域访问

target：表示代理到的目标地址

pathRewrite：默认情况下，我们的/api也会被写到URL中，如果希望删除，可以使用此配置

secure：默认情况下不接受转发到https的服务器上，如果希望支持，则设置为false

changeOrigin：表示是否更新代理后请求的headers中host地址

3.原理

proxy工作原理实质上是利用http-proxy-middleware这个http代理中间件，实现请求代发