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

·  阅读 2886

本地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...');
}) ;
复制代码
分类:
前端
标签:
分类:
前端
标签:
收藏成功!
已添加到「」, 点击更改