1、问题:react项目需要本地用node模拟接口
2、解决:使用express做服务端,mock做假数据,http-proxy-middleware是做代理的,避免出现跨域无法访问的问题。
3.、具体实现:
npm run eject
a.安装http-proxy-middleware
npm install http-proxy-middleware
- 在src下建立setupProxy.js文件 代理本地3001 到 3000,本地代理完事,接下来是做node服务器
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:
cnpm install --save-dev express
下载mockjs:
cnpm install --dev-save mockjs
mock/server.js :
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请求就可以拿到了