vue+axios配置跨域,并用axios优雅的调用接口

由于本人92年的,记性越来越差,所以做点啥事喜欢搞个笔记(年纪大了-.-0)。

因为Vue的开发阶段,基本用webpack打包编译(其他打包工具也一样),需要node环境
本地运行,因而运行的域名为本地localhost。这时候调用后端接口就涉及跨域的问题了。

话不多说,这里不考虑后端配置cros跨域方案(ps:这是废话,不然也不会继续说下去了)

找到config目录下的index.js里的proxyTable:{} 将其修改

   proxyTable: {
       '/api': {
           target:'http://10.200.12.216:8080', // 这个是你要代理的地址(开发阶段接口地址)
           changeOrigin: true,//跨域需要加上这个
           pathRewrite: {
               '^/api': '/' 这里的/其实就是代表根,可以理解为用/api代表target里的地址
           }
       }
   }

修改config目录下的dev.env.js(开发环境配置)

    module.exports = {
      NODE_ENV: '"development"',
      API_ROOT:'"/api"' // 这里配置开发环境时接口地址,就是代表你上面要代理的地址
    }
    prod.env.js修改成
    module.exports = {
      NODE_ENV: '"production"',
      API_ROOT:'"http://xxxxxxxxx"' //实际线上环境接口地址
    }

既然已经约定好baseUrl了,接来下我就需要用到这个。

通过上面的配置就已经ok了,接下来是舒服的用axios去调用接口了。我个人习惯分离式的写法,不喜欢这种写法的,可以把下面这些结合到一个文件里

    // 在src下新建一个目录api,里面新建js文件,每个js文件都存放着对应页面的接口调用方法
    比如我建立一个index.js用来存放主页面的接口调用方法
    import axios from 'axios'
    // 上面所约定的baseUrl就是这个意思,比如我写/user 实际就表示baseUrl+/user
    const baseUrl = process.env.API_ROOT // 这里就是根据开发环境不同baseUrl改变
    axios.defaults.baseURL = baseurl;
    /* 
        其实我是倾向于将axios的配置单独放到一个文件用来配置,但是这里为了简单就这样了.
    */
    // 一个接口方法
    export const test = () => {
    return axios.get('/test').then(res => {
        return res.data
    })
    
    // 在页面调用时
    <script>
    import { test } from '@/api/index.js' // 表示从该目录下导入test函数
    export default {
        mounted:{
            test().then(res => {
                console.log(res)
            })
        }
    }
    </script>
}

当然最简单的流程你也可以这样

proxyTable: {
       '/api': {
           target:'http://10.200.12.216:8080', // 这个是你要代理的地址(开发阶段接口地址)
           changeOrigin: true,//跨域需要加上这个
           pathRewrite: {
               '^/api': '/' 这里的/其实就是代表根,可以理解为用/api代表target里的地址
           }
       }
   }
   proxyTable配置不变,然后修改main.js
   import axios from 'axios'
   Vue.prototype.$http = axios // 或者window.$http............
   
   页面调用this.$http.........
   这个就不多加赘述,因为.....我不喜欢这样做,很难看