vue中使用axios反向代理解决跨域问题

## axios

axios是一个轻量级的http请求库 本质上是原生xhr的封装，使用的promise封装符合最新的ES规范

特点：

1. 从浏览器中创建xmlhttprequest

2. 支持promise api

3. 提供了一些并发请求的接口，方便操作

4. 从nodejs中创建http请求

5. 可以拦截请求和响应

6. 转换请求和响应数据

7. 自动转化为json文件

使用方法：

1. 执行 npm i axios

2. 在哪儿使用就在那儿引入使用。import axios from 'axios'

3.axios请求方法：axios.get和axios.post

## 使用axios时需要使用反向代理解决跨域问题

在vue项目开发阶段，常常会碰到跨域请求的问题，我们能使用反向代理解决

解决方法：

1. 在项目文件夹下创建 vue.config.js配置文件（修改vue配置文件后必须重启服务）

其中写：

module.exports={
    devServer:{
        proxy:{
            "/api":{//"/api"自定义的请求路径地址
                target:"请求地址",
                changeOrigin:true,//是否进行跨域 ture是  false不是
                pathRewrite:{//路径重写
                "^/api":"/"
                }
            }
        }
    }
}

2. 将 axios.get/post("请求地址路径)的请求地址路径改为自定义的/api

       以上就是使用axios进行反向代理解决跨域的方法。但这里会有一个很麻烦的点，就是每次使用就需要在相应页面引入axios并且代理路径前都需要写/api，很不方便，后期项目上线时该api路径也得一个一个改，改起来很头疼。

这里我就给大家写一种简便的方法可以方便后期维护及修改api：

在min.js文件中添加以下代码：

   // 引入axios
   import axios from "axios"
   // 给vue原型添加一个属性$axios 其属性值为axios
   Vue.prototype.$axios = axios;
   // 给axios设置一个默认请求地址 这样请求数据时/api可以省略不写 方便后期优化
   axios.defaults.baseURL = "/api";

 使用axios调取数据的时候直接 按如下代码就可以了，无需再引入axios

 this.$axios('请求路径，可省略/api').then(res=>{

                console.log(res);

                })

    最后一定要注意 重启服务   修改vue配置文件后必须重启服务！