npm install axios
npm install js-cookie

[vue代码片段] vue项目操作cookie，使用js-cookie封装操作cookie的函数

封装axios请求

src\utils\request.js

import { getCookie } from './cookie.js';
import Vue from 'vue'
import axios from 'axios';

//2。创建server
const instance = axios.create({
    baseURL: 'http://kumanxuan1.f3322.net:8001',//  index/index  
    timeout: 5000  //超时链接
})

//3.请求拦截    登陆放token的地方
instance.interceptors.request.use(config => {
    config.headers['My_ToKen'] = getCookie('token')
    return config
})

//4.响应拦截   解码加密  公共逻辑判断   项目中所有的错误  都可以在这个位置进行处理
instance.interceptors.response.use(res => {
    // console.log(res)
    //全局错误提示
    if (res.status === 200 || res.data.code == 200) {
        return res.data
    } else {
        // 因为此处this指向不是组件实例对象，所以直接用Vue.prototype也可以调到，
        //至于为什么可以调到？Element 为 Vue.prototype 添加了全局方法 $message
        Vue.prototype.$message({
            message: '网络不通',
            type: 'error'
        });
    }
})

export default instance

封装cookie 对应的操作方法

src\utils\cookie.js

import Cookie from 'js-cookie'

export function setCookie(key, value) {
    Cookie.set(key, value)
}
export function getCookie(key) {
    return Cookie.get(key)
}
export function removeCookie(key) {
    Cookie.remove(key)
}

接口示例

src\http\http.js

// 存放所有的接口请求
import instance from "../utils/request";

// 登录接口 post
export function loginApi(params) {
    return instance({
        url: '/login',
        method: 'post',
        data: params   // 请求参数放在请求体
    })
}


//获取首页列表数据  get
export function getDataList(params) {
    return instance({
        url: '/getDataList',
        method: 'get',
        // 请求参数拼接在url上
        params: params
    })
}

//获取首页列表数据  delete
export function deleteData(params) {
    return instance({
        url: '/getDataList',
        method: 'delete',
        // 请求参数拼接在url上
        params: params
    })
}

调用接口，发送请求示例

import { getDataList } from "@/http/http";


getDataList({ page: this.page, pageSize: this.pageSize }).then((res) => {
            this.tableData = res.data
        })

跨域代理 vue.config.js

module.exports = {
    lintOnSave: false,// eslint-loader 是否在保存的时候检查
    devServer: { 
        port: 3000,  // 修改端口，可以不改
        proxy: {   // 代理
            '/api': {
                target: "要请求的服务器地址",
                changeOrigin: true,
                pathRewrite: {
                    '^/api': ''
                }
            }
        }
    },
}