标签：axios vue http js api reject data response

前后端分离项目基本都要解决跨域，除了后端设置外，前端通常通过代理解决跨域。由于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 == 401) {
            switch (error.response.status) {
                case 401:
                    ElMessageBox.alert('您的登录信息已失效，点击确定按钮后将跳转到登录页面', '提示', {
                        confirmButtonText: '确定',
                        showClose: false,
                        callback: (action) => {
                            sessionStorage.clear()
                            window.location.href = "http://10.13.50.81:8080/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是咱们前端项目的地址打头的，第一次看到并且请求失败的时候我还以为是自己配失败了，难道不应该是后端的地址吗，结果是正确的.........然后我才理解了代理的意思

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

标签：axios,vue,http,js,api,reject,data,response
来源： https://blog.csdn.net/sinat_38628334/article/details/121813737

本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享；
2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关；
3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关；
4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除；
5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。