Webpack 设置代理手册

在开发过程中，我们经常会遇到跨域问题。这时候，我们可以通过设置代理来解决这个问题。Webpack 是一款非常流行的打包工具，也提供了很方便的代理设置。

设置代理

在 webpack 配置文件中的 devServer 配置项中设置代理即可。如下是一个简单的例子，将 /api 开头的请求都代理到 http://localhost:3000：

module.exports = {
  devServer: {
    proxy: {
      '/api': {
        target: 'http://localhost:3000',
        changeOrigin: true
      }
    }
  }
}

属性解释

• proxy：代理配置对象
• '/api'：需要代理的接口前缀
• target：代理的目标地址
• changeOrigin：是否改变源地址，默认为 false。如果设置为 true，请求头中的 Host 会设置成代理目标地址，可以解决一些反向代理的问题。

处理多个代理

如果需要处理多个代理，只需要在 proxy 中设置多个属性即可。如下是一个例子，将 /api/test 和 /api/example 请求分别代理到不同的地址：

module.exports = {
  devServer: {
    proxy: {
      '/api/test': {
        target: 'http://localhost:3000',
        changeOrigin: true
      },
      '/api/example': {
        target: 'http://localhost:4000',
        changeOrigin: true
      }
    }
  }
}

处理 websocket

如果需要代理的是 websocket 请求，则需要设置 ws 属性为 true。如下是一个例子：

module.exports = {
  devServer: {
    proxy: {
      '/socket': {
        target: 'ws://localhost:8080',
        ws: true
      }
    }
  }
}

总结

设置代理是解决跨域问题的有效方法之一。Webpack 提供了很方便的代理设置，可以帮助我们快速地解决这个问题。