axios 携带cookie_Mock.js的正确使用以及丢失cookie的问题

背景

最近在一个vue项目中需要使用mockjs模拟数据,研究了下用法。网上看到的资料没有找到开发环境下动态配置Mock数据的，不适合真正去运用到项目中，我是通动态配置的引入,感觉是一种比较便捷的使用方式。简单做个记录和分享，不喜勿喷。

Mock.js是干嘛用的

Mock.js 是一款模拟数据生成器，旨在帮助前端攻城师独立于后端进行开发，帮助编写单元测试。提供了以下模拟功能
1.根据数据模板生成模拟数据
2.模拟 Ajax 请求，生成并返回模拟数据
3.基于 HTML 模板生成模拟数据

上面这是官网的说法，事实上它主要是用来拦截ajax请求的。原理是在发送请求之前，把XHR对象给改了，改为mock自己封装的XHR对象方法，只要匹配到对应请求地址，就走自己封装的方法，从而就会去找本地相对路径下对应url的数据。

vue中开发环境动态配置Mockjs
安装

npm install mockjs

引入

const Mock = require('mockjs')

建立本地mock数据

根目录新建一个mock.js(这个名字随便起)，你也可以在建在别的目录，只要能引就行。

mock.js主要代码

const Mock = require('mockjs')
const Random = Mock.Random
const baseURL=process.env.BASE_URL #process.env是node环境变量,development环境下本地开发环境下自己配的BASE_URL地址,即:开发环境的接口域名
Mock.setup({
  timeout: 20  # 模拟接口延时
})
# 然后我要把模拟的数据写出来
const userList = function () {
    let Users = []
    let type = ['游客', '会员', '管理员']
    for (let i = 0; i < 10; i++) {
        let obj = Mock.mock({
            userId: i + 1,
            userName: Random.cname(),
            userEmail: Random.email(),
            'userType|+1': type
        })
    Users.push(obj)
}
    return Users 
}
 
const articleDetail = function () {
    let obj = {}
    obj.author_name = Random.cname()
    obj.title = Random.csentence(5, 30)
    obj.publish_date = Random.date()
    obj.content = Random.paragraph(100)
    obj.view = Random.integer(0, 10000)
    obj.source = '今日头条'
    return {
        data: obj
    }
}
 
let mockList= [{
    url: "/api/userList",#要模拟的接口url
    data: userList,#这个直接写方法就行，mock内部自己会判断来调用
    isMock:true,#这个参数很关键，区分这个接口是否还需要mock模拟,后期可能有的接口后段已经给出了，不需要模拟了，也不需要把这个方法删掉，只需要isMock改为false即可，以后接口万一需要更改，留下来随时可以模拟，不需要重新建数据。
    type:'post'
},
{
    url: "/api/articleDetail",
    data: articleDetail ,
    isMock:false
}
]
# 关键一步   
# 通过Mock.mock()才可以匹配对应url   
#将mockList中所有需要mock的数据进行mock
mockList.forEach(item=>{
    # 把需要进行mock的请求进行mock
    item.isMock && Mock.mock(RegExp(item.url + '.*'), item.type || 'post', item.data) #正则可以匹配带参数的url
})

main.js中引入mock.js里mock好的数据

#只在开发环境引入

process.env.NODE_ENV === 'development' && require('./mock.js')

测试一下
在userlist.vue中

axios.post('/api/userList', {}).then((res)=>{
    console.log(res)
})

#没问题，拿到本地mock的数据。接口没有请求
完事
关于Mock.js语法规则的使用，参考官方语法规范

关于cookie丢失的问题

由于mock默认拷贝了一份原生XHR,默认值withCredentials为false。对于跨域请求，是不携带cookie的，如果需要携带cookie,你应该设置了withCredentials:true，但是引入mock之后，你的设置被mock默认的那份给覆盖，需要对应的修改mock自己复制了的那一份原生XHR中的withCredentials:true
mock本身setup只能设置timeout,我给作者提过这个issues,希望setup也可以设置withCredentials，但遗憾的是一直没有得到回复。
我们只能自己主动去改，
其实也很简单，直接改他封装好的Mock.XHR,就一句话就可以

const Mock = require('mockjs')
Mock.XHR.prototype.withCredentials = true #加上这句即可