Перехватчик запросов в Axios меняет метод запроса - PullRequest
Новая
       39

Перехватчик запросов в Axios меняет метод запроса

0 голосов
/ 10 июня 2019

Я испытываю очень странное поведение с перехватчиками запросов axios в приложении React, когда я добавляю перехватчик для добавления заголовка Auth ко всем запросам.В результате axios меняет мой метод запроса с GET на OPTIONS, когда я проверяю его на вкладке «Сеть» браузера.Также я получаю сообщение об ошибке "Unhandled Rejection (TypeError): не удается прочитать свойство 'status' of undefined".Вот мой код: 

    import {itsInstance as itsAxios} from "./axios/axios-config";
    //Other imports...

    class App extends Component {

    constructor(props) {
        super();

        itsAxios.interceptors.request.use(request => {
            console.log('REQUEST', request);
            request.headers.Authorization = `Bearer ${props.token}`;
            return request;
        });

        itsAxios.interceptors.response.use(response => {
            console.log('RESPONSE', response);
            return response;
        }, error => {
            console.log('RESPONSE ERROR', error);
            if (error.response.status === HTTP_STATUS_UNAUTHORIZED || error.response.status === HTTP_STATUS_FORBIDDEN) {
                // console.log("FORBIDDEN");
            } else {
                alert(error);
            }
            return Promise.reject(error);
        });

    }

    render() {
        return (
            <BrowserRouter>
                <React.Suspense fallback={loading()}>
                    <Switch>
                        <Route path="/login" name="Login Page" render={props => <Login {...props}/>}/>
                        <Route path="/" name="Home" render={props => (
                            this.props.token !== null ?
                                <DefaultLayout {...props}/> :
                                <Redirect to='/login'/>)}/>
                    </Switch>
                </React.Suspense>
            </BrowserRouter>
        );
    }
    }

    const mapStateToProps = (state) => {
        return {
            token: state.token
        }
    };

    export default connect(mapStateToProps)(App);

Когда я удаляю "request.headers.Authorization = Bearer ${props.token};"линия это работает правильно.Причина, по которой я создаю экземпляры перехватчиков в конструкторе, заключается в том, что я хочу получить доступ к props.token, возможно, есть лучшее решение, чем это

...