React使用 http-proxy-middleware配置Proxy，并用node—express+mock模拟接口

1、问题：react项目需要本地用node模拟接口

2、解决：使用express做服务端，mock做假数据，http-proxy-middleware是做代理的，避免出现跨域无法访问的问题。

3.、具体实现：

const proxy = require('http-proxy-middleware');module.exports = function(app) {app.use(proxy('/api', { target: 'http://192.168.0.102:3001/api' ,secure: false,changeOrigin: true,pathRewrite: {"^/api": "/"},// cookieDomainRewrite: "http://localhost:3000"}));
};

b、node服务，在src下新建mock/server.js文件

下载express：

var Mock = require("mockjs")
var express = require("express");
var app = express();
var bodyParser = require('body-parser');
app.use(bodyParser.json());
app.use(bodyParser.urlencoded({ extended: false }));
app.get('/', function(req, res) {res.send('hello world'); 
})
app.get('/api/index', function(req, res) {res.send('index'); 
})
app.get('/api/list', function(req, res) {const data = Mock.mock({"object|2-4": {"110000": "北京市","120000": "天津市","130000": "河北省","140000": "山西省"}})res.send(data); 
})
app.listen(3001, () => {console.log('服务器运行成功，端口3001')
})

安装好之后直接启动 node .src/mock/serve.js

我习惯是nodemon  ，下载nodemon

cnpm install --dev-save nodemon

后面直接就可以用nodemon启动就可以了。

也可以在package.json 里scripts加一条： "mock": "node src/mock/server.js" ，可以用npm run mock启动

4、页面上直接用axios请求就可以拿到了

本文来自互联网用户投稿，文章观点仅代表作者本人，不代表本站立场，不承担相关法律责任。如若转载，请注明出处。 如若内容造成侵权/违法违规/事实不符，请点击【内容举报】进行投诉反馈！