React中的proxy

安裝http-proxy-middleware

npm install http-proxy-middleware --save

進行配置

安裝middleware插件后，在src目錄中新建setupProxy.js文件，在文件中放入如下代碼：

const { createProxyMiddleware } = require('http-proxy-middleware')

module.exports = function (app) {
  app.use(createProxyMiddleware('/api', {
    target: 'http://localhost:3000',
    secure: false,
    changeOrigin: true,
    pathRewrite: {
      "^/api": "/api"
    }
  }))
}

簡單來說就是當接口是以/api開頭才用代理。

比如：
本來是在localhost:8080啟動的react，
axios.get("/api/a")請求，最后代理路徑就是http://localhost:3000/api/a

pathRewrite ： 路徑重寫功能 默認的好像是pathRewrite: {
"^/xxx": ""} 這個xxx是和createProxyMiddleware()第一個參數對應的。
上訴例子就是當匹配到/api開頭的接口，開頭的 /api不變,比如用前端請求數據url地址為"/api/b",實際上請求地址為"http://localhost:3000/api/b";
如果上訴例子這樣寫 pathRewrite: {"^/api": ""} 意思就是開頭的 /api 變成了 ""（空字符串）,比如用前端請求數據url地址為"/api/b",實際上請求地址為"http://localhost:3000/b"，
這個功能相當於js中的replace功能

然后運行項目

npm run start

想看更多的博客，請到該 博客