vue3项目之axios封装以及vue.config.js 代理proxy配置

前后端分离项目基本都要解决跨域，除了后端设置外，前端通常通过代理解决跨域。由于vue-cli3创建的项目不会自动生成vue.config.js文件，需要手动创建在根目录下进行相关配置。

准备：

前端地址：http://10.13.123.123:8888

后端接口地址示例：http://10.13.456.456:9999/test/login/doLogin

封装axios：

//src>request>http.js
//main.ts引用：import http from "./request/http.js";app.config.globalProperties.$http = http;
import axios from "axios";
import qs from "qs";
import { ElMessageBox } from 'element-plus'

axios.defaults.baseURL = "/api/"; //这个api属于是无中生有了
// //设置超时
axios.defaults.timeout = 50000;




// 响应拦截器
axios.interceptors.response.use(
    (response) => {
        if (response.status === 200) {
            return Promise.resolve(response);
        } else {
            return Promise.reject(response);
        }
    },
    // 服务器状态码不是200的情况
    (error) => {
        console.log(error.response);
        if (error.response.status) {
            switch (error.response.status) {
                case 401:
                    ElMessageBox.alert('您的登录信息已失效，点击确定按钮后将跳转到登录页面', '提示', {
                        confirmButtonText: '确定',
                        showClose: false,
                        callback: (action) => {
                            sessionStorage.clear()
                            window.location.href = "http://10.13.123.123:8888/login"
                        },
                    })
                    break;
      
                default:
                    ElMessageBox.alert(`其他错误--${error.response.status}`, '提示', {
                        confirmButtonText: '确定',
                        showClose: false
                    })

            }
            return Promise.reject(error.response);
        }
    }
);

export default {
    post(url, data) {
        return new Promise((resolve, reject) => {
            axios({
                    method: "post",
                    url,
                    data: qs.stringify(data),
                    headers: {
                        "Content-Type": "application/x-www-form-urlencoded",
                        'Authorization': sessionStorage.getItem("token"),
                    },
                })
                .then((res) => {
                    resolve(res);
                })
                .catch((err) => {
                    reject(err);
                });
        });
    },
    formPost(url, data) {
        data.append("addby", sessionStorage.getItem("userId"))
        return new Promise((resolve, reject) => {
            axios({
                    method: "post",
                    url,
                    data: data,
                    headers: {
                        "Content-Type": "multipart/form-data",
                        'Authorization': sessionStorage.getItem("token")
                    },
                })
                .then((res) => {
                    resolve(res);
                })
                .catch((err) => {
                    reject(err);
                });
        });
    },
    loginPost(url, data) {
        return new Promise((resolve, reject) => {
            axios({
                    method: "post",
                    url,
                    data: qs.stringify(data),
                    headers: {
                        "Content-Type": "application/x-www-form-urlencoded",
                    },
                })
                .then((res) => {
                    resolve(res);
                })
                .catch((err) => {
                    reject(err);
                });
        });
    }
};

请求地址封装：

//src>request>api.js
//main.ts引用：import api from "./request/api.js";app.config.globalProperties.api = api;
const loginApi = "/test/login/doLogin" //登录

export default {
    login
}

devServer配置：对于这个代理我的理解是将后端的接口地址易容成前端项目同源域名来欺骗浏览器从而解决跨域。

    devServer: {
        open: true, // 构建完成自动打开浏览器
        openPage: '/indexPage', // 打开指定页面路径
        //   compress: true,   // 开启gzip压缩
        disableHostCheck: true,
        host: '10.13.123.123',
        port: 8888,
        https: false, // 开启https代理
        hotOnly: false, // 热模块更新作用
        proxy: {
            '/api': {  //这个无中生有的api表示浏览器在请求资源（图片、文件、接口）时检测到请求路径中有api就要将请求的前半部分替换成target配的地址，披着123.123的壳子去请求456.456的资源
                target: 'http://10.13.456.456:9999/', 
                changeOrigin: true,
                pathRewrite: {
                    '^/api': ''
                }
            }
        },
        before: app => {}
    },

请求示例：

this.$http .post(this.api.login, passData).then((res) => {

});

接口请求浏览器表现： 

查看请求可以发现，这里的Request URL是咱们前端项目的地址打头的，第一次看到并且请求失败的时候我还以为是自己配失败了，难道不应该是后端的地址吗，结果是正确的.........然后我才理解了代理的意思

到这里就结束啦，希望可以帮助到你呀~~~