webpack設置服務器代理詳解

服務器代理的作用

解決跨域：

1. 原理： 利用服務器訪問服務器沒有跨域問題的原理

2. 請求過程：先向代理(同源)服務器發起請求，再由代理(同源)服務器請求外部服務器

代理服務器的搭建

1. 安裝 http-proxy-middleware 包

   `npm install --save-dev http-proxy-middleware`
   

2. 一個簡單的代理服務器代碼

   var express = require('express');
   
   var proxy = require('http-proxy-middleware');
   
   var app = express();
   
   app.use('/api', proxy({target: 'http://localhost:3001/', changeOrigin: true}));
   
   app.listen(3000);

http-proxy-middleware 的配置

1. proxy([context,] config)

   proxy('/api', {target: 'http://10.16.85.138:8080'})
   
   當發起的請求包含`/api`時，請求就會經過代理服務器，例如：
   
   項目發起的請求地址是：`http://localhost:8000/api`
   
   經過代理服務器就變成了：`http://10.16.85.138:8080/api`

2. 常見的配置對象例子

   // 引用依賴
   var express = require('express');
   var proxyMiddleware = require('http-proxy-middleware');
   
   // proxy 中間件的選擇項
   var proxyTable = {
   '/api': {
          // 目標服務器 host
          target: 'http://10.16.85.138:8080', 
          // 默認false，是否需要改變原始主機頭爲目標URL
          changeOrigin: true, 
          pathRewrite: {
            // 重寫請求，比如我們源訪問的包含/api，那麼請求會將/api替換爲/yh/ihr/api
           '/api': '/yh/ihr/api', 
            // 重寫請求，比如我們源訪問的是api/old-path，那麼請求會被解析爲/api/new-path
           '^/api/old-path' : '/api/new-path',  
           // 同上
           '^/api/remove/path' : '/path'
          },
          router: {
              // 如果請求接口 == '/api/'
              // 則重寫目標服務器 'http://10.16.85.138:8080' 爲 'http://localhost:8000'
              '/api/' : 'http://localhost:8000'
          },
       // proxy事件: 監聽請求返回事件
       onProxyRes : proxy.on('proxyRes', function (proxyRes, req, res) {
         console.log('target', JSON.stringify(proxyRes.headers, true, 2))
       });
   }
     }
   
   Object.keys(proxyTable).forEach(function (context) {
    var options = proxyTable[context]
    if (typeof options === 'string') {
      options = { target: options }
    }
    // 創建並使用代理
    app.use(proxyMiddleware(options.filter || context, options))
   })
     app.listen(8000);

   1. option.pathRewrite： 對象/函數，重寫目標url路徑

   // 重寫
   pathRewrite: {'^/old/api' : '/new/api'}
   
   // 移除
   pathRewrite: {'^/remove/api' : ''}
   
   // 添加
   pathRewrite: {'^/' : '/basepath/'}
   
   // 自定義
   pathRewrite: function (path, req) { return path.replace('/api', '/base/api') }

3. option.router：對象/函數，重新指定請求轉發目標

   // 使用主機或者路徑進行匹配，返回最先匹配到結果
   // 所以配置的順序很重要
   router: {
       'integration.localhost:3000' : 'http://localhost:8001',  // host only
       'staging.localhost:3000'     : 'http://localhost:8002',  // host only
       'localhost:3000/api'         : 'http://localhost:8003',  // host + path
       '/api/iaf/search'            : 'http://localhost:8004'   // path only
   }
   
   // 自定義
   router: function(req) {
       return 'http://localhost:8004';
   }

4. http-proxy 事件

   • option.onError: 監聽proxy錯誤事件

   • option.onProxyRes：監聽proxy的迴應事件

   • option.onProxyReq：監聽proxy的請求事件

5. 代理服務器請求轉換圖解：