如何使用 Axios reactjs 获取 303 请求的响应头

Posted 2023-03-28

【中文标题】如何使用 Axios reactjs 获取 303 请求的响应头

【英文标题】：How to get response headers for 303 request using Axios reactjs

【发布时间】：2019-02-15 18:18:03

【问题描述】：

我正在使用下面的代码

    const configureAjaxClient = () => 
        let csrf_token = '';
        const instance = axios.create(
            baseURL: '/abc',
            timeout: 300000,
            paramsSerializer: (params) => 
                return qs.stringify(params,  arrayFormat: 'brackets' );
            ,
        );

        instance.interceptors.request.use((config) => 
            config.headers['X-CSRF-Token'] = csrf_token;
            if (config.data) 
                config.data = qs.stringify(config.data);
            
            return config;
        );

        instance.interceptors.response.use((response) => 
            if (response.data) 
                return Promise.reject(response);
            
            return response;
        , (error) => 
            return Promise.reject(error);
        );

        return instance;
    ;

    export default configureAjaxClient;

当我的请求是 303 时重定向到位置标头作为响应，并在下面调用错误函数

    errorError:Network  Error
        at createError (createError.js:16)
        at XMLHttpRequest.handleError (xhr.js:87)   

并且错误地我得到 error.response 为未定义。

我将如何获得响应标头，并且我希望重定向到另一个路由。

请帮忙 我正在使用最新的 Axios 和 reactjs

【参考方案1】：

你不能。 Axios 是 XMLHttpRequest 的包装器，它透明地处理重定向响应，并且无法更改它。

如果您要切换到 fetch，那么您可以使用 a request object 指定不自动遵循重定向。

【讨论】：

但是为什么我得到 error.reponse 为 undefined 至少我应该得到响应标头，我可以在 Network 选项卡中看到它。

【参考方案2】：

我的服务器正在检查其 Ajax 请求的请求中缺少此标头

// Headers
// This header is required to inform server that its an Ajax request
instance.defaults.headers.common['X-Requested-With'] = 'XMLHttpRequest';

【参考方案3】：

目前，您可以：

    const response = axios('your303endpoint')
      .catch(data => data.response.headers)
      .then(headers => console.log(headers))