第一步:封装前端请求,创建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,
  }

}

Logo

华为开发者空间,是为全球开发者打造的专属开发空间,汇聚了华为优质开发资源及工具,致力于让每一位开发者拥有一台云主机,基于华为根生态开发、创新。

更多推荐