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

最新推荐文章于 2024-09-27 21:05:27 发布

瞎写点

最新推荐文章于 2024-09-27 21:05:27 发布

阅读量5.7k

点赞数 2

分类专栏： vue 文章标签： vue.js javascript 前端

本文链接：https://blog.csdn.net/sinat_38628334/article/details/121813737

版权

本文介绍了在Vue3项目中如何使用axios进行封装，并讲解了如何在vue.config.js中配置代理proxy来解决跨域问题。在前端项目中，通过代理将后端接口伪装为同源，从而规避浏览器的跨域限制。详细阐述了axios的封装过程、devServer代理配置步骤以及请求示例，帮助开发者理解并实现这一技术。

摘要由CSDN通过智能技术生成

前后端分离项目基本都要解决跨域，除了后端设置外，前端通常通过代理解决跨域。由于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) => {
        conso