说明：后端没有进行跨域的时候需要我们自己解决,方案是服务器代理请求

第一步：环境配置

由于版本更新，vue-cli搭建的项目已经没有config环境配置文件夹了，这时我们需要自己新建一个配置文件：
1.在根目录下新建js文件：vue.config.js

  1.  //vue.config.js文件中
  2. module.exports = {
  3.   publicPath: '/',
  4.   devServer: {
  5.       proxy: {
  6.           '/api': {
  7.               target: 'XXX',
  8.             //需要进入的路径，你请求的第三方接口，最好是主地址。方便设置axios的baseUrl
  9.             //为了后续不同接口调用。
  11.               changeOrigin: true,
  12.             // 在本地会创建一个虚拟服务端，然后发送请求的数据，并同时接收请求的数据，
  13.             // 这样服务端和服务端进行数据的交互就不会有跨域问题。
  15.               pathRewrite: { // 路径重写，
  16.                   '^/api': '' //替换target中的请求地址，
  17.      //也就是说以后你在请求http://api.douban.com/v2/XXXXX这个地址的时候直接写成/api即可。
  18.               }
  19.           },
  20.       }
  21.   }
  22. };

第二步：挂载axios

为了方便使用我们可以在全局配置中设置axios的baseUrl为/api
在main.js中设置

  1. //main.js文件中
  2. import axios from 'axios'; //导入axios
  5. axios.defaults.baseURL = '/api' //与第一步中的api相同，即获取了target的url值
  6. Vue.prototype.axios = axios； //将axios挂载在vue原型上，后面不同文件之间直接this.axios调用

调用请求

  1.  this.axios
  2.    .post("User/Api/login?phone=18084839200&password=12345678&phone_type=android")
  3.    .then(res => {
  4.    console.log(res.data); // response.data为后端返回的具体数据
  5.    alert("请求成功");
  6.  })

情况：成功
image.png