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数据来模拟发送：

mock/user.js目录下：

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)
}