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