react——setupProxy.js_配置網路代理通路——通路本地資源

react的代理實作跨域

• 在配置在src/setupProxy.js檔案
• 并通過npm安裝http-proxy-middleware,代理中間件子產品
• ​

  ​npm i -D http-proxy-middleware​

  ​

建立檔案setupProxy.js

導入：

内置了express

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

建立：

module.exports = app => {
// 參數1：以什麼規則開頭
  app.use('/api', proxy({
    // 目标位址開頭
    target: 'https://api.iynn.cn/film',
    // 是否修改主機頭
    changeOrigin: false,
    //去掉開頭
    pathRewrite: {
    '^/api': ''
    }
  }))
}      

也可以通過這個mock資料來模拟發送：

module.exports = (app) => {
    app.get("/api/users", (req,) => {
        res.send([{ id: 1,name: "si",},{id: 2,name: "eee",}]);
    });
    app.post("/api/users", (req,) => {res.send([{id: 1,name: "張三",},{id: 2,name: "英子",}]);
    });
};      

const userMockFn = require('../mock/user')
module.exports = app => {
  userMockFn(app)
}