[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