一、利用axios调用后端接口，并配置devServer.proxy实现跨域显示数据

前提条件：

1、axios已安装（npm install axios）；

2、网上找一个公开的api（以下api我用的项目里的 api:http://elm.cangdu.org/statis/api/all)；

3、vue版本vue@2.7.13(npm list vue)；

4、项目不在运行的情况下

步骤：

主要关联src/api/request.js、vue.config.js、随便一个.vue页面这三个文件

1、在src下创建api文件夹，创建request.js文件

添加代码

/* eslint-disable*/
import axios from 'axios'

axios.defaults.timeout = 5000 // 超时时间设置
axios.defaults.withCredentials = true // 是否跨域
axios.defaults.baseURL = '/url' // 域名或ip 【注意/url和后面的vue.config.js的/url相匹配】

// Content-Type 响应头
axios.defaults.headers.post["Content-Type"] = "application/x-www-form-urlencoded;charset=UTF-8";

// 先简单弄下小例子  /statis/api/all 获取所有api请求信息
export const getAllData = params => {
  return axios.get(`/statis/api/all`, { params: params })
}

?2、找到根目录里的vue.config.js，配置代理服务器，添加代码

  devServer: {
    proxy: {
      '/url': { // /url 表示拦截以/url开头的请求路径 【与request.js的url字段要一致】
        target: 'http://elm.cangdu.org', // http://域名或ip
        changeOrigin: true, // 是否开启跨域
        pathRewrite: { // 重写路径
          '^/url': '' // 把/url变成空字串
        }
      }
    }
  }

?3、在其中一个.vue页面，添加点击事件

<template>
  <div class="home">
    <button @click="getAllData">调用</button>
  </div>
</template>

<script>
/* eslint-disable*/
import { getAllData } from '@/api/request'

export default {
  name: 'HomeView',
  methods: {
    getAllData () {
      getAllData().then((res) => {
        console.log(res)
      })
    }
  },
  
}
</script>

?4、npm run serve 运行，点击按钮，看下有没有问题