1.跨域

当请求不同协议、域名、端口即为跨域

2.配置跨域

1.在vue中，项目目录下创建一个
    vue.config.js 文件
            module.exports = {
                devServer: {
                ///端口号：8081
                port: 8081,
                ////配置跨域
                proxy: {
                    ////匹配api开头请求
                    "/api": {
                        ///代理地址 /跨域地址
                        target: "http://mengxuegu.com:9999/pro-api",
                        //开启代理
                        changeOrigin: true,
                        ///
                        pathRewrite: {
                            "^/api": ""
                        }
                    },
                    /////可用多个配置
                    // "/dev-api": {
                    //     ///代理地址 /跨域地址
                    //     target: "http://mengxuegu.com:9992/pro-api",
                    //     //开启代理
                    //     changeOrigin: true,
                    //     ///
                    //     pathRewrite: {
                    //         "^/dev-api": ""
                //     }
                // },
            }
        }
    }  

3.配置axios 拦截器

1.在vue中，src目录下面创建一个utils (工具)文件夹
    在utils文件夹中创建一个request.js 文件
2.reque.js 文件中配置axios 拦截器
    import axios from 'axios'
    ////创建一个实例对象为axios对象
    const request=axios.create({
    baseURL:'/',
    timeout:5000 ///请求超时时间
        
    }
    ////请求拦截
    request.interceptors.request.use(config=>{
    ///在发送请求之前做什么
    return config
        
    },error=>{
    ///在请求失败做什么
    return Promise.reject(error)
        
    })
    ///响应拦截
    request.interceptors.response.use(response=>{
    //在响应成功之前做什么
    return response
        
    },error=>{
    //在响应失败做什么
    return Promise.reject(error)
        
    })
    ///导出request （axios实例）对象
    export default request

4.配置接口

 1.在vue中，src目录下面创建一个api (接口)文件夹
    在api 文件夹中创建一个api.js文件
2.在api.js 文件中配置接口信息
    ///引入axios拦截器
    import request from '../utils/requset'
    ///变量来存储vue.config.js 文件中"/aip" 配置的跨域请求
    const BASE_URL="/api"
    export default ({
            /////请求列表接口
             getList(){
                 return request({
                    type:'get',
                     url:BASE_URL+'bd.json'
                 })
             }
             ////登录验证 mobile,password 形参来获取登录接口的数据
             login(mobile,password){
            return request({
                url:BASE_URL+'/user/login',
                ////请求方式 post 请求
                method:'post',
                ////接收数据
                data :{
                    mobile,
                    password
                }
            })
        },
        ////token 验证
        getInfo(token){
            return request({
                method:'get',
                ///ES6模板字符串拼接 变量用${}来接收
                url:BASE_URL+`/user/info/${token}`
            }) 
        }
    })
3.在需要的组件引用api配置接口即可