[webpack]深入理解proxy代理

1、一个基本的代理

module.exports = {
  //...
  devServer: {
    proxy: {
      '/api': 'http://localhost:3000'
    }
  }
};

/api/users将请求代理到的请求http://localhost:3000/api/users。

2、重写路径代理

如果不想/api传递，需要重写路径：

module.exports = {
  //...
  devServer: {
    proxy: {
      '/api': {
        target: 'http://localhost:3000',
        pathRewrite: {'^/api' : ''}
      }
    }
  }
};

/api/users将请求代理到的请求http://localhost:3000/users。

3、支持https

默认情况下，是不接受在HTTPS上运行且具有无效证书的后端服务器。如果需要，可以像这样修改配置：

module.exports = {
  //...
  devServer: {
    proxy: {
      '/api': {
        target: 'https://other-server.example.com',
        secure: false
      }
    }
  }
};

4、将请求代理到同一目标

如果要将多个特定路径代理到同一目标，则可以使用具有context属性的一个或多个对象的数组：

module.exports = {
  //...
  devServer: {
    proxy: [{
      context: ['/auth', '/api'],
      target: 'http://localhost:3000',
    }]
  }
};

参考：https://webpack.js.org/configuration/dev-server/#devserverproxy

原文链接：https://www.cnblogs.com/piaobodewu/p/11228973.html
本文来源 爱码网，其版权均为 原网址 所有 与本站无关，文章内容系作者个人观点，不代表 本站 对观点赞同或支持。如需转载，请注明文章来源。