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

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请求就可以拿到了