Mock.js

• 背景
• 安装

背景

  前端需要后端数据才能完成项目开发，但是因为后端接口完成需要时间，所以在不影响时间进度的情况下，前端需要写假的接口数据来模拟后端接口，等到后端接口完成再去掉自己的模拟数据，以前我们一般是写本地json来模拟，但是因为无法增删改查，所以现在有一种更好的方式，就是用Mock.js。
  它的优势在于可以在真实的请求上拦截ajax，并根据Mockjs数据规则模拟真实接口返回的数据，并将模拟的随机数据返回参与相应的处理，实现增删改查，在后台接口完成后，我们所做的只是去掉mockjs，停止拦截真实的数据，非常方便。

安装

原理

代理

  因为浏览器的同源策略，前端想要访问后端地址，不能直接访问，需要跨域访问。
  浏览器同源策略是浏览器最核心也是最基本的安全功能，所谓同源是指：域名、协议、端口相同。
  这里说一下vue项目中怎样实现跨域请求后端接口
在config文件夹下的index文件中处理，将请求后台的接口按照下面配置然后挂载到proxyTable上，例如：

proxyTable: {
  '/real': {
      target: 'http://68.184.22.65:8087/real',
      changeOrigin: true,
      pathRewrite: {
        '^/real': '/'
      }
    }
}

  说明：/real是匹配其路径后面的任何路径，例如：'/apple', ...将匹配“/ apple”，“/ apple / images”，“/ apple / images / news”等，默认是‘/’，匹配所有路径。target是要代理的目标主机，changeOrigin用于更改目标地址头信息（是否将请求地址更改为目标主机）。比如: 客户端请求地址为 test.iqiyi.com，转发的目标服务器地址target.iqiyi.com，当changeOrigin设置为true时，host得到的是target.iqiyi.com；当设置为false时host的值为test.iqiyi.com，这样就可以处理跨域问题了，当然这只适用于开发环境。pathRewrite是在将请求发送到目标之前修改请求路径。比如上面这个例子，是将匹配到的/real'路径拼接到http://68.184.22.65:8087/real'的后面，这样子就会出现两个/real，所以改为‘/’就可以删除一个/real，当然也可以重写或者添加。
  有两种方式可以实现代理
如果要使用服务器的app.use path参数来匹配请求; 在没有http-proxy-middleware context参数的情况下创建和挂载代理：

var express = require('express');
var proxy = require('http-proxy-middleware');

var options = {
        target: 'http://www.example.org',
        changeOrigin: true,  
        ws: true, 
        pathRewrite: {
            '^/api/old-path' : '/api/new-path', 
            '^/api/remove/path' : '/path'  
        },
        router: {
            'dev.localhost:3000' : 'http://localhost:8000'
        }
    };

var exampleProxy = proxy(options);

var app = express();
    app.use('/api', exampleProxy);
    app.listen(3000);

app.use就是给你的当前路径的请求加上中间件，所有匹配到的路径的请求都会走这个中间件处理。
另外一种是提供一种替代方式来决定哪些请求应该被代理;如果您无法使用服务器的路径参数来装载代理，或者需要更多的灵活性。

var proxy =  require（' http-proxy-middleware '）;
var options = {
    target ： ' http：// localhost：3000 '，
    pathRewrite ： {
         ' ^ / ' ： ' / extra / ' 
    }
};
var apiProxy =  proxy（' / api '，options）;

以上两种方式都可以实现代理，这个是vue-cli已经写好的，所以我们只需要传入规定的格式即可。
注意：以上两种方式实现跨域的都是使用http-proxy-middleware这个插件， http-proxy-middleware用于把请求代理转发到其他服务器的中间件，区别就是使用场景不同，在没有http-proxy-middleware context参数的情况下创建和挂载代理就用express的use跟中间件一起处理跨域，如果无法使用服务器的路径参数来装载代理，或者需要更多的灵活性就直接用中间件去处理，express的use方法只是express其中的一个功能可以搭配中间件实现跨域，它还有很多别的功能，中间件主要是用来跨域的，它还可以操作请求路径，实现各种请求方式，灵活性更高，例如：

proxy('**', {...}) 匹配任何路径，所有请求将被转发；
proxy('**/*.html', {...}) 匹配任何以.html结尾的请求；
proxy('/*.html', {...}) 匹配当前路径下以html结尾的请求；
proxy('/api/**/*.html', {...}) 匹配/api下以html为结尾的请求；
proxy(['/api/**', '/ajax/**'], {...}) 组合
proxy(['/api/**', '!**/bad.json'], {...}) 不包括**/bad.json
自定义匹配
/**
 * @return {Boolean}
 */
var filter = function (pathname, req) {
    return (pathname.match('^/api') && req.method === 'GET');
};

var apiProxy = proxy(filter, {target: 'http://www.example.org'})

代理指的是浏览器发送请求到自己浏览器的服务器端，由自己的服务器再转发给要跨域的服务器端，做了一层代理，http-proxy-middleware内部用的http-proxy，http-proxy会创建代理服务器

代理服务器

  代理服务器形象的说就是网络信息的中转站。上网所有的文字、照片信息都是后端服务器返回的，访问都需要通过代理服务器，在一般情况下，我们使用网络浏览器直接去连接其他internet站点取得网络信息时，须送出Request信号来得到回答，然后对方再把信息以bit方式传送回来。代理服务器是介于浏览器和web服务器之间的一台服务器，有了它之后，浏览器不是直接从web服务器中获取信息而是向代理服务器发出请求，Request信号会先送到代理服务器，由代理服务器来取回浏览器所需要的信息并发送给浏览器。

代理服务器功能

1.突破自身ip访问限制，可以访问国外网站
2.提高访问速度：通常代理服务器都设置一个较大硬盘缓冲区，当有外界的信息通过时，同时也将其保存到缓冲区，当其他用户再访问相同信息时，则直接由缓冲区中提取信息，返回给用户，提高访问速度。
3.实现跨域访问web服务器
4.安全性得到提高，无论是聊天室还是浏览网站，web服务器只知道你来自代理服务器，而你真实的ip是不知道的，这就使使用者的安全性得到了提高。
5.代理服务器可以起到防火墙的作用，可以过滤或者屏蔽某些信息。

代理服务器工作流程

1.当客户端A对web服务器请求时,此端提出请求时,此请求会首先发送到代理服务器.
2.代理服务器接收到客户端请求后,会检查缓存中是否存有客户端所需要的数据.
3.如果代理服务器没有客户端A所请求的数据,它将会向WEB器提交请求.
4.WEB服务器响应请求的数据.
5.代理服务器向客户端A转发Web服务器的数据.
6.客户端B访问web服务器,向代理服务器发出请求.
7.代理服务器查找缓存记录,确认已经存在WEB服务器的相关数据.
8.代理服务器直接回应查询的信息,而不需要再去服务器进行查询,从而达到节约网络流量和提高访问的速度目的.

正向代理和反向代理

参考地址：https://www.jianshu.com/p/208c02c9dd1d
https://baike.baidu.com/item/%E5%8F%8D%E5%90%91%E4%BB%A3%E7%90%86

  如果是mock拦截的话，需要在webpack.dev.conf.js这个文件中写

before (app) {
    if (env === 'mock') {
    // XXX mock拦截器
     app.use(mockMiddleware(app))
   }
},
after (app) {
    // XXX 代理Proxy（未拦截到继续执行代理）
    if (env === 'mock') {
    app.use('/', proxy(
    {target: configDev.endServers.default, changeOrigin: true}
   ))
 }
}