vue调用后端接口实现和后端通信（axios）

第一步：封装前端请求，创建utils工具类api

let base = '';

//传送json格式的post请求
export const postRequest = (url, params) => {
    return axios({
        method: 'post',
        url: `${base}${url}`,
        data: params
    })
}

//传递json的put请求
export const putRequest = (url, params) => {
    return axios({
        method: 'put',
        url: `${base}${url}`,
        data: params
    })
}
//传递json的get请求
export const getRequest = (url, params) => {
    return axios({
        method: 'get',
        url: `${base}${url}`,
        data: params
    })
}
//传递json的delete请求
export const deleteRequest = (url, params) => {
    return axios({
        method: 'delete',
        url: `${base}${url}`,
        data: params
    })
}

注意：加上baseUrl，以防后期有需求更改 

第二步：配置请求转发解决跨域

let proxyObj = {
} // 新建代理对象，对象用{}


proxyObj['/'] = {
  //websocket
  ws: false,
  //目标地址
  target: 'http://localhost:8081',
  //发送请求头中host会设置成target
  changeOrigin: true,
  //不重写请求地址
  pathRewrite: {
    '^/': '/'
  }
}

// 解决 端口跨域问题（根据node.js 代理对象请求转发到8081去）
// 有了代理之后，会被node.js 转发到后端的8081去，实现跨域的效果
module.exports = {
  devServer: {
    host: 'localhost',
    port: 8080,
    // proxy 代理
    proxy: proxyObj,
  }

}