配置axios以及代理跨域方法实例

1.下载axios

cnpm i axios -S

2.封装axios 基本路径 

import axios from 'axios'  //引入axios

   console.log('..process',process.env);
const service =axios.create({
    baseURL:process.env.VUE_APP_BASE_API, //开发环境走的基本路径
    timeout:5000
})

//配置前置请求拦截
service.interceptors.request.use(res => {
// Do something before request is sent
return res;
})
//配置响应拦截
service.interceptors.response.use(res=>{
    return res;
},error => {
// Do something with request error
return Promise.reject(error);
});
export default service

3.封装接口

import base from './base'

//登录接口
export   function login(params){
    return base({
        url:'/login',
        method:'GET',
        params


    })

}

//首页-销量额等数据统计
export   function dataCount(params){
    return base({
        url:"/home/dataCount",
        method:'GET',
        params


    })

}

---

const { defineConfig } = require('@vue/cli-service')
module.exports = defineConfig({
  transpileDependencies: true,
    lintOnSave: false,
    devServer: {
      proxy: {
         // 这里的api 表示如果我们的请求地址有/api的时候,就出触发代理机制
        '/api': {
          target: 'http://localhost:9898',
          ws: true,
          // 是否跨域 需要设置此值为true 才可以让本地服务代理我们发出请求
          changeOrigin: true,
           // 路径重写
        pathRewrite: {
          //     // 重新路由  localhost:8888/api/login  => www.baidu.com/api/login
              '^/api': '' // 假设我们想把 localhost:8888/api/login 变成www.baidu.com/login
          }
        },
        // '/foo': {
        //   target: '<other_url>'
        // }
      }
    }

  
})

 建立  .env.development 开发环境文件 

# 研发环境 本地环境

NODE_ENV='development'



# base api
VUE_APP_BASE_API = '/api'

# 设置服务端口
  port = 9898

 

仅仅个人笔记，仅供参考