nuxt配置axios模块

配置本地代理

nuxt在cli中配置时可以选择添加axios模块，如果当时没有选择的话，可以手动来添加。

shellcopied
npm i -S axios

然后在nuxt.config.js里面作如下配置

jscopied
// nuxt.config.js
export default {
    axios: {
        proxy: true
    },
    
    proxy: {
        '/api': {
            target: '[接口地址]',
            changeOrigin: true
        }
	}
};

axios 请求与响应拦截

在plugins目录中添加axios.js文件

jscopied
// plugins/axios.js
import * as axios from 'axios';

export default function ({ app: { $axios } }) {
    $axios.all = axios.all;
    $axios.spread = axios.spread;
    
    // 请求拦截
    $axios.onRequest((config) => {
        // 这里写请求拦截配置
        return config;
    });
    
    // 响应拦截
    $axios.onResponse((response) => {
        // 这是城写响应拦截配置
        return response.data;
    });
    
    // 请求失败处理
    $axios.onError((error) => {
        // ...
        return Promise.resolve(error.response);
    });
};

然后在nuxt.config.js里面作如下配置即可

jscopied
// nuxt.config.js
export default {
    plugins: [
        '~/plugins/axios'
    ]
};