VUE SSR 服务端渲染模式下， axios interceptors执行两次/多次的问题

随手记录一下吧。

具体的 node端渲染原理懒得去探求究竟了。 根据debug跟踪发现，是axios配置reques的时候，没有通过create实例化，而是直接修改了axios的interceptors，因此导致服务端运行出现异常。服务端渲染模式下， 每个请求 interceptors 里面的内容都会打印两次。

尝试将request的封装，改为先实例化axios，然后修改实例的 interceptors。 问题得到修复。

贴个代码吧。

 

出现bug的代码：

import axios from 'axios';
import Vue from 'vue';
import { Toast } from 'vant';
Vue.use(Toast);

// axios 配置
axios.defaults.timeout = 5000;
axios.defaults.baseURL = 'http://127.0.0.1:7001';

// http request 拦截器
axios.interceptors.request.use(
  config => {
    // const authToken = localStorage.getItem('authToken');
    // if (authToken) {
    //   config.headers.Authorization = `Bearer ${authToken}`;
    // }
    return config;
  },
  err => {
    return Promise.reject(err);
  }
);

// http response 拦截器
axios.interceptors.response.use(
  response => {
    if (EASY_ENV_IS_NODE) {
      console.log('EASY_ENV_IS_NODE response=========>', response);
    } else {
      console.log('FRONT END response=========>', response);
    }
    return response.data;
  },
  error => {
    console.log('error', error);
    if (error.response) {
      Toast('服务器内部错误，请联系管理员！');
    }
    // console.log(JSON.stringify(error));//console : Error: Request failed with status code 402
    // return Promise.reject(error.response.data);
    return { status: 500, error: JSON.stringify(error) };
  }
);

export default axios;

 

 

 

 

修复后：

import axios from 'axios';
import Vue from 'vue';
import { Toast } from 'vant';
Vue.use(Toast);

// axios 配置
const request = axios.create({
  timeout: 5000,
  baseURL: 'http://127.0.0.1:7001',
});

// http request 拦截器
request.interceptors.request.use(
  config => {
    // const authToken = localStorage.getItem('authToken');
    // if (authToken) {
    //   config.headers.Authorization = `Bearer ${authToken}`;
    // }
    return config;
  },
  err => {
    return Promise.reject(err);
  }
);

// http response 拦截器
request.interceptors.response.use(
  response => {
    return response.data;
  },
  error => {
    console.log('error', error);
    if (error.response) {
      Toast('服务器内部错误，请联系管理员！');
    }
    // console.log(JSON.stringify(error));//console : Error: Request failed with status code 402
    // return Promise.reject(error.response.data);
    return { status: 500, error: JSON.stringify(error) };
  }
);

export default request;