axios响应拦截的问题

Question

在react的项目里用到了axios，出现了一个问题。接口请求成功了，但是拦截器没有正确返回数据

从networm可以看到请求成功了

但是在响应拦截器里没有执行成功的回调函数
import axios from "axios";
import storageUtil from './storageUtil';
import { message } from 'antd';

/**

• • 全局请求配置

*/
axios.defaults.headers.post['Content-Type'] = 'application/json;charset=UTF-8'
axios.defaults.baseURL = 'http://localhost:8112'

/**

• • 请求拦截

*/
axios.interceptors.request.use(

config => {
    let token = storageUtil.getItem('token');
    token && (config.headers['Authorization'] = token);
    return config
},
error => { 
    return Promise.error(error)
}

)

/**

• • 响应拦截

*/
axios.interceptors.response.use(

res => {
    console.log('没有走这里')
    return res.status === 200 ? Promise.resolve(res.data) : Promise.reject(res.msg)
},
err => {
    console.log('为什么到这里了啊')
    if(err.status) {
        switch(err.status) {
            case 401:
                message.info('未登录');
                window.location.href = '/login'
                break;
                //dispatch()
            case 403:
                message.info('登录过期，请重新登录');
                storageUtil.removeItem('token')
                break;
            case 500:
                message.info('未知错误');
                break;
            default:
                message.info(err.msg)
        }
    }
}

)
看到控制台有报错

Answer 1

报错信息已经告知 3000 与8112是两个不同端口，跨域了。而你的当前header头又明确告知不允许 Access-Control-Allow-origin ，所以无法响应拦截。要正常拦截先解决跨域问题。

Answer 2

跨域了啊，你得解决跨域的问题。