vue axios封装和跨域

使用vue-cli3构建项目

vue create vuedev

安装axios

npm install axios

安装vue-axios

npm install --save axios vue-axios

新建文件夹utils

在里面新建文件reques.js,封装axios

//utils/request.js
import axios from "axios"
const instance =axios.create({
  baseUrl:'',
  timeout:5000
})
// 请求拦截
// 所有网络请求都会先走这个
instance.interceptors.request.use(
  function(config){
    return config
  },
  function(error){
    return Promise.reject(error)
  }
)
// 响应拦截
// 所有网络请求返回数据后都先走这个
instance.interceptors.response.use(
  function(response){
    return response
  },
  function(error){
    return Promise.reject(error)
  }
)
export function get(url,params){
  return instance.get(url,{
    params
  })
}
export function post(url,data){
  return instance.post(url,{
    data
  })
}
export function del(url){
  return instance.delete(url)
}
export function put(url,data){
  return instance.put(url,data)
}

如果项目中没有config文件夹，在根目录与src同级建一个vue.config.js

// vue.config.js
module.exports = {
  devServer: {
    host: 'localhost',
    port: 8080,
    proxy: {
      '/cm': {
        target: 'http://chinamobile:3000',// 测试环境的接口域名
        changeOrigin: true, // 是否开启跨域
      },
    }
  }
}

demo.vue

  本地启动localhost8080，请求localhost8080代理到测试环境域名

//demo.vue

import {get} from "../utils/requset.js
methods:{
    getList(){
    
        get('/cm/cmgetList',{date:'1607581250718',name:'nainai'}).then(res=>
            console.log(res)
        )

    }
}