vue3.0使用axios发起请求

1.先申明下，通常情况下创建的vue3.0是没有vue.config.js的，

所以需要手动创建vue.config.js        (如果使用的是严格代码格式验证在代码最后需要加一个回车)

module.exports = {
  devServer: {
    proxy: {
      '/api': {
        // 此处的写法，目的是为了 将 /api 替换成 https://www.baidu.com/
        target: 'http://xx.xxx.xxx.xxx:8070/books',
        // 允许跨域
        changeOrigin: true,
        ws: true,
        pathRewrite: {
          '^/api': ''
        }
      },
      '/a': {
        // 此处的写法，目的是为了 将 /api 替换成 https://www.baidu.com/
        target: 'http://xx.xxx.xxx.xxx:8080/LoginByAdmin',
        // 允许跨域
        changeOrigin: true,
        ws: true,
        pathRewrite: {
          '^/a': ''
        }
      }
    }
  }
}

2.需要使用到跨域的组件里

<template>
  <div class="blogContent">
    <div class="container">
      <div class="row">
        <div class="col-sm"><h1>1</h1></div>
        <div class="col-sm"><h1><button @click="getMsg">click</button></h1></div>
        <div class="col-sm"><h1>3</h1></div>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  name: 'BlogContent',
  props: {
    msg: String
  },
  methods: {
    getMsg () {
      this.$axios.get('/api').then(res => {
        console.log(res.data.data)
      })
    }
  }
}
</script>

<style scoped lang="scss">

</style>

3.vu.config.js创建的目录结构