如何在获取请求中获取响应的headers？

Question

我正在尝试获取 headers 获取请求后的响应，并为我的 redux 状态分配一些值。不过，我只能访问 headers 的承诺。如果能帮我找出原因，我将不胜感激。

export function sign_in(email, password){
return (dispatch) => {
    dispatch({ type: 'LOGGING_USER_IN' });    
    return fetch("http://localhost:3000/api/v1/auth/sign_in" ,{
        method: "POST",
        cache: "no-cache",
        credentials: "same-origin",
        headers: {
            "Content-Type": "application/json; charset=utf-8"
        },
        body: JSON.stringify({
            email: email,
            password: password
        })
    })
    .then(response => { 
        dispatch({type:'LOGGING_USER_IN_SUCCESS', payload: response.headers})
    })
    .catch(error =>{
        dispatch({type:'LOGGING_USER_IN_FAILURE', payload: error, error:true})
    })
}    
};

我的减速器：

export default function authReducer(state = {
isLoaded: false,
}, action) {

switch (action.type) {
    case 'LOGGING_USER_IN':
        return  {
            ...state,
        }

    case 'LOGGING_USER_IN_SUCCESS':
        // console.log(action.payload.get("access-token"))
        return  {
            // ...state,
            isLoaded: true,
            user: action.payload}

    case 'LOGGING_USER_IN_FAILURE':
        return{
            ...state,
            isLoaded: true,
            errorMessage: action.payload.message}

    default:
        return state;
}
}

Answer 1

response.headers 是一个 Headers{} object 表示 HTTP 响应 headers.

您需要通过调用 get(name) 查找要发送的 header，或者您可以像这样使用 forEach 获取所有 header :

.then(response => {
    const payload = {};
    response.headers.forEach((value, name) => payload[name] = value);
    dispatch({type:'LOGGING_USER_IN_SUCCESS', payload })
})

demo

旁注：仅公开以下 headers:

Cache-Control
Content-Language
Content-Type
过期
Last-Modified
编译指示

因此，如果您想访问任何其他 header，则需要适当地设置 Access-Control-Expose-Headers header。

source

如何在获取请求中获取响应的headers？

How to get the headers of a reponse in a fetch request?

response

fetch

http-headers

reactjs

redux