React

react 16 版本之后的代理

  2. // 单个代理
  3. // "proxy": "https://yapi.baidu.com/mock/44743"
  5. // 16+ 之后不允许这个写
  6. // proxy -> 'string'  -> 'object'
  7. // "proxy": {
  8. //   '/api': {
  9. //     target: "https://yapi.baidu.com/mock/44743"
  10. //   },
  11. //   '/aps': {
  12. //     target: "https://yapi.baidu.com/mock/44743"
  13. //   }
  14. // }
  17. // 1. 去 src 目录 新建一个 setuoProxy.js
  19. // 2. 下载 http-proxy-middleware, 分为两个版本 1.0 ｜ 2.0
  20.   // 2.1 const proxy = require('http-proxy-middleware'); // 1.0
  21.   // 2.2 const { createProxyMiddleware } = require('http-proxy-middleware');
  23. // 3. setupProxy
  24. // 引入 proxy
  25. const { createProxyMiddleware } = require('http-proxy-middleware');
  27. // 抛出一个函数
  28. module.exports = function(app) {
  29.   // 使用
  30.   app.use(
  31.     // createProxyMiddleware 插件
  32.     createProxyMiddleware(
  33.       '/api', // 代理之后的名称
  34.       { 
  35.        target: 'https://yapi.baidu.com/mock/44743', // 代理的地址
  36.        secure: false,  // 安全
  37.        changeOrigin: true, // 是否设置跨域
  38.        pathRewrite: { // 替换
  39.         "^/api": ""
  40.        },
  41.       }
  42.     ),
  43.   );
  44. };
  48. ## 代理多个
  50. // 抛出一个函数
  51. module.exports = function(app) {
  52.   // 使用
  53.   app.use(
  54.     // createProxyMiddleware 插件
  55.     createProxyMiddleware(
  56.       '/api', // 代理之后的名称
  57.       { 
  58.        target: 'https://yapi.baidu.com/mock/44743', // 代理的地址
  59.        secure: false,  // 安全
  60.        changeOrigin: true, // 是否设置跨域
  61.        pathRewrite: { // 替换
  62.         "^/api": ""
  63.        },
  64.       }
  65.     ),
  66.     createProxyMiddleware(
  67.       '/aps', // 代理之后的名称
  68.       { 
  69.        target: 'https://yapi.baidu.com/mock/44757/banner/to', // 代理的地址
  70.        secure: false,  // 安全
  71.        changeOrigin: true, // 是否设置跨域
  72.        pathRewrite: { // 替换
  73.         "^/aps": ""
  74.        },
  75.       }
  76.     ),
  77.   );
  78. };