1.vue中axios前端跨域

应用场景：后端没有进行跨域的时候需要我们自己解决，方案是服务器代理请求

一、环境配置

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

1.在根目录下新建js文件：vue.config.js

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

二、挂载axios

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

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

三、调用请求

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

请求成功