webpack開發配置API代理解決跨域問題-devServer

1. 一個完整的webpack配置代理代碼

設置代理的前提條件：
一、須要使用本地開發插件：webpack-dev-server。
二、webpack-dev-server使用的是http-proxy-middleware來實現跨域代理的。
三、webpack版本： 3.0、4.0親測有效

一個webpack配置信息：

module.exports = {
  //...
  devServer: {
    proxy: {
      '/api': {
        target: 'http://www.baidu.com/',
        pathRewrite: {'^/api' : ''},
        changeOrigin: true,     // target是域名的話，須要這個參數，
        secure: false,          // 設置支持https協議的代理
      },
      '/api2': {
          .....
      }
    }
  }
};

2. 配置中主要的參數說明

2.1 '/api'

捕獲API的標誌，若是API中有這個字符串，那麼就開始匹配代理，
好比API請求/api/users, 會被代理到請求 http://www.baidu.com/api/users 。

2.2 target

代理的API地址，就是須要跨域的API地址。
地址能夠是域名,如：http://www.baidu.com
也能夠是IP地址：http://127.0.0.1:3000
若是是域名須要額外添加一個參數changeOrigin: true，不然會代理失敗。

2.3 pathRewrite

路徑重寫，也就是說會修改最終請求的API路徑。
好比訪問的API路徑：/api/users,
設置pathRewrite: {'^/api' : ''},後，
最終代理訪問的路徑：http://www.baidu.com/users，
這個參數的目的是給代理命名後，在訪問時把命名刪除掉。

2.4 changeOrigin

這個參數能夠讓target參數是域名。

2.5 secure

secure: false,不檢查安全問題。
設置後，能夠接受運行在 HTTPS 上，能夠使用無效證書的後端服務器

2.6 其餘參數配置查看http-proxy-middleware文檔

其餘的配置參數等信息，能夠查看這裏：https://github.com/chimurai/h...

3. 參考資料

webpack-dev-server： https://github.com/webpack/we...
http-proxy-middleware： https://github.com/chimurai/h...
webpack官網 devServer.proxy配置