本地mock及本地mock解决跨域问题

方法一：使用Node实现Http代理

代理的出现是因为浏览器同源策略的存在

服务端实现代理的例子和方法很多比如nginx 反向代理解决生产环境的跨域问题

再有http-server等一些第三方的包帮我处理基本达到了开箱即用的体验

通常我们所说的代理来源于http1.1的定义，代理扮演的是「中间人」角色，对于连接到它的客户端来说，它是服务端；对于要连接的服务端来说，它是客户端。它就负责在两端之间来回传送 HTTP 报文

假如我通过代理访问A网站，对于A来说，它会把代理当做客户端，完全察觉不到真正客户端的存在，这实现了隐藏客户端IP的目的。

但是他们到底是如何实现的，值得一探究竟，下面是用原生nodejs 写个以后个代理

const http = require("http");
const url = require("url");
//首先启动本地服务器
http.createServer(function(req, res) {
  //客户端请求有两种方式，可以是对象，也可以是url字符串
  //1.这里采取的是对象形式，包括url对象以及headers
  var options = url.parse(req.url);
  options.headers = req.headers;
  //2.如果采取字符串形式，就传入一个完整的url字符串，node会自动解析成url对象

  //通过客户端请求新建一个代理服务器
  //代理请求仿照本地请求头的数据
  var proxyRequest = http.request(options, function(proxyResponse) {     //代理请求获取的数据再返回给本地res
    proxyResponse.on('data', function(chunk) {
        console.log('proxyResponse length:', chunk.length);
        res.write(chunk, 'binary');
    });
    //当代理请求不再收到新的数据，告知本地res数据写入完毕。
    proxyResponse.on('end', function() {
      console.log('proxied request ended');
      res.end();
    });

    res.writeHead(proxyResponse.statusCode, proxyResponse.headers);
  }); 

  //data只有当请求体数据进来时才会触发
  //尽管没有请求体数据进来，data还是要写，否则不会触发end事件
  req.on('data', function(chunk) {
    console.log('in request length:', chunk.length);
    proxyRequest.write(chunk, 'binary');
  });

   req.on('end', function() {
   //向proxy发送求情，这里end方法必须被调用才能发起代理请求
   //所有的客户端请求都需要通过end来发起
    proxyRequest.end();
  });

}).listen(8080);
复制代码

方法二：CORS node server.js 设置header头形式

具体实现的步骤网上一搜一大堆不赘述了关键词直接搜node本地mock就可以了，直接贴解决的代码，下面注释已经标注，==解决跨域问题==

var express             = require('express');
var app                 = express();
var bodyParse           = require('body-parser');
var cookieParser        = require('cookie-parser');
 
var jsonData = require('./data.json')
 
app.use(cookieParser());
app.use(bodyParse.urlencoded({extended:false}));
app.use(express.static('public'));
 
// 解决跨域问题
app.all('*',function (req, res, next) {
  res.header('Access-Control-Allow-Origin', '*');
  res.header('Access-Control-Allow-Headers', 'Content-Type, Content-Length, Authorization, Accept, X-Requested-With , yourHeaderFeild');
  res.header('Access-Control-Allow-Methods', 'PUT, POST, GET, DELETE, OPTIONS');
 
  if (req.method == 'OPTIONS') {
    res.send(200); /让options请求快速返回/
  }
  else {
    next();
  }
});
 
// mock 数据写法
// 获取注册用户列表
app.get('/user/list', function (req, res) {
  var result = {};
  result.data = jsonData.userList;
  result.errcode = 0;
  result.errmsg = '';
  res.end(JSON.stringify(result));
})
 
// 审核注册用户
app.post('/user/audit/1', function (req, res) {
  var result = {};
  result.data = jsonData.audit;
  result.errcode = 0;
  result.errmsg = '';
  res.end(JSON.stringify(result));
})
 
// 获取考试列表
app.get('/exam/getlist', function (req, res) {
  var result = {};
  result.data = jsonData.examList;
  result.errcode = 0;
  result.errmsg = '';
  res.end(JSON.stringify(result));
})
 
// 监听3000端口
var server=app.listen(3000, function () {
	console.log('listening at =====> http://127.0.0.1:3000...');
}) ;
复制代码