react——setupProxy.js_配置网路代理访问——访问本地资源

Posted 2022-10-03 勇敢*牛牛

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) => 
        res.send([ id: 1,name: "si",,id: 2,name: "eee",]);
    );
    app.post("/api/users", (req, res) => res.send([id: 1,name: "张三",,id: 2,name: "英子",]);
    );
;

代理模块导入：

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