vue 使用axios - 码农教程

1、安装 vue-axios插件：

npm i vue-axios-plugin -S

2、安装 qs，用来转换参数

npm i qs -S

3、在main.js文件引入vue-axios-plugin和qs

import VueAxiosPlugin from 'vue-axios-plugin';
import QS from 'qs';

4、注册插件

const APIROOT = process.env.NODE_ENV === 'production' ? process.env.BASE_URL : 'http://localhost:8001/';

Vue.use(VueAxiosPlugin, {
    reqHandleFunc: config => {
        config.baseURL = APIROOT + 'ashx/';

        config.headers = {
            'Content-Type': 'application/x-www-form-urlencoded; charset=UTF-8',
            'Authorization': Util.getToken() || ''
        };

        config.transformRequest = [function (data, headers) {
            return QS.stringify(data);
        }];

        config.timeout = 180000;
        config.maxContentLength = 2147483647;

        return config;
    },
    reErrorFunc: error => {
        Toast(error);

        return Promise.reject(error);
    },
    resHandleFunc: response => {
        !response.data.success && Toast(response.data.msg);

        return response.data;
    },
    resErrorFunc: error => {
        Toast(error);

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

说明：

（1）Content-Type 默认值为 “application/json”，此时的 Request Headers 如下图

如此发送的请求在后台通过 HttpContext.Current.Request.Params 取不到参数，需要将其设置为 “application/x-www-form-urlencoded”

（2）此程序前后端分离，发送的请求需要携带 token，设置在 header 的 Authorization 中

（3）跨域请求时会发送两次请求，一次是OPTIONS请求，用于同服务器确认是否允许跨域，只有服务器允许跨域时才会发送第二次真实的请求，只要服务器允许跨域即可，客户端不用管，这个OPTIONS请求是取消不了的

原文地址：https://www.cnblogs.com/laoq112/p/11943827.html