Vue实现开发环境跨域请求

Vue实现开发环境跨域请求

1. 在项目根目录创建 vue.config.js
   代码如下：

module.exports = {
   devServer: {
       open: true, //是否自动弹出浏览器页面
       host: "localhost",
       port: '8080',
       https: false,
       hotOnly: false,
       proxy: {
           '/apiOne': {
               target: '跨域请求服务域名1', //API服务器的地址
               ws: true,  //代理websockets
               changeOrigin: true, // 虚拟的站点需要更管origin
               pathRewrite: {   //重写路径 比如'/api/aaa/ccc'重写为'/aaa/ccc'
                   '^/apiOne': ''
               }

           },
           '/apiTwo': {
               target: '跨域请求服务域名2', //API服务器的地址
               ws: true,  //代理websockets
               changeOrigin: true, // 虚拟的站点需要更管origin
               pathRewrite: {   //重写路径 比如'/api/aaa/ccc'重写为'/aaa/ccc'
                   '^/apiTwo': ''
               }
           }

       },
   }
}

2. 封装axios
   在src 下创建utils文件夹，之后在utils下创建request.js(根据自己喜好创建对应路径和文件)
   request.js代码如下：
   该js封装了get和post请求的方法

import axios from 'axios'

axios.defaults.timeout = 20000;                        //响应时间
axios.defaults.headers.post['Content-Type'] = 'application/json;charset=UTF-8';        //配置请求头（多种类型，根据自身情况可适配修改）
axios.defaults.baseURL = '';   //配置接口地址



//返回状态判断(添加响应拦截器)
axios.interceptors.response.use((res) =>{
    //对响应数据做些事
    if(!res.data.success){
        return Promise.resolve(res);
    }
    return res;
}, (error) => {
    console.log('网络异常')
    return Promise.reject(error);
});

//返回一个Promise(发送post请求)
export function skyPost(url, params) {
    return new Promise((resolve, reject) => {
        axios.post(url, params)
            .then(response => {
                resolve(response);
            }, err => {
                reject(err);
            })
            .catch((error) => {
                reject(error)
            })
    })
}

//返回一个Promise(发送get请求)
export function skyGet(url, param) {
    return new Promise((resolve, reject) => {
        axios.get(url, {params: param})
            .then(response => {
                resolve(response)
            }, err => {
                reject(err)
            })
            .catch((error) => {
                reject(error)
            })
    })
}

export default {
    skyPost,
    skyGet
}

3. 使用方式

<template>
    <div>
        <div>
            <p class="two">
                <span>POST请求数据<br>{{postData}}</span>
            </p>
        </div>

        <div>
            <p class="one"><span>Get请求数据<br>{{getData}}</span>
            </p>
        </div>
    </div>
</template>

<script>
    import request from '@/utils/request'

    export default {
        name: "httpRequestDemo",
        data() {
            return {
                postData: {},
                getData: {}
            }
        },
        methods: 
            getPostData: function () {
                request.skyPost("apiOne/"+"你的请求url", {
                    a: "123",
                    b: "456"
                }).then(res => {
                    if (res.status === 200) {
                        console.log("请求成功============" + res);
                        this.postData = JSON.stringify(res);
                    }
                })
            },
            getGetData: function () {
                request.skyGet("apiTwo/"+"你的请求url'', {
                    page: "1",
                    pagesize: "10"
                }).then(res => {
                    if (res.status === 200) {
                        console.log("请求成功============" + res);
                        this.getData = JSON.stringify(res);
                    }
                })
            }

        },
        created: function () {
            // `this` 指向 vm 实例
            console.log("===============》创建该页面生命周期")
            this.getPostData();
            this.getGetData();
        }
    }
</script>

<style scoped>
    section {
        width: 100%;
        min-height: 150px;
        background: #42b983;
        color: white;
    }

    .one {
        background: #23bdd0;
    }

    .two {
        background: #d02368;
    }
</style>