axios安装使用+跨域问题（后台不需要做更改，头部header也不需要加）

最新推荐文章于 2024-01-28 10:00:00 发布

原创

最新推荐文章于 2024-01-28 10:00:00 发布 · 2.1k 阅读

2 ·

CC 4.0 BY-SA版权

本文介绍了在Vue项目中如何安装axios和qs库，并详细讲述了axios的配置过程，包括在main.js和config/index.js中的设置。同时，针对配置后可能出现的本地服务器未重启和后台服务器未开启的问题进行了故障排除。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

1、安装axios和qs

cnpm install axios-save

cnpm install qs --save

⚠️：一定要有-save，另外qs解决必须传参数，然后对数据转换，so要安装。

2、axios的配置

（1）main.js里添加：

import axios from 'axios'
import qs from 'qs'
//添加原型属性，之后可以直接使用this.$axios
Vue.prototype.$axios= axios;
//设置全局属性，之后可以直接使用this.HOST
Vue.prototype.HOST="/api";

//发送请求的拦截器
axios.interceptors.request.use((config) => {
    if(config.method  === 'post'){
        config.data = qs.stringify(config.data);
    }
    return config;
}, error => {
    return Promise.reject(error);
});
//响应数据的拦截器
axios.interceptors.response.use(response => {
    return response
}, error => {
    return Promise.resolve(error.response)
});

(2) config文件夹下 index.js里找到proxyTable属性在里边加入：