Axios는 응답 헤더 필드에 액세스합니다

React 및 Redux를 사용하여 프론트 엔드 앱을 작성 중이며 axios 를 사용하여 요청을 수행하고 있습니다. 응답 헤더의 모든 필드에 액세스하고 싶습니다. 브라우저에서 헤더를 검사 할 수 있으며 필요한 모든 필드 (예 : 토큰, uid 등)가 있음을 알 수 있지만 전화 할 때

const request = axios.post(`${ROOT_URL}/auth/sign_in`, props);
request.then((response)=>{
  console.log(response.headers);
});

난 그냥 얻을

Object {content-type: "application/json; charset=utf-8", cache-control: "max-age=0, private, must-revalidate"}

다른 모든 필드가 표시되는 것처럼 여기 내 브라우저 네트워크 탭.

최고.

CORS 요청의 경우 브라우저는 기본적으로 다음 응답 헤더에만 액세스 할 수 있습니다.

• 캐시 제어
• 내용 언어
• 컨텐츠 타입
• 만료
• 마지막 수정
• 프라 그마

클라이언트 앱이 다른 헤더에 액세스 할 수있게 하려면 서버 에서 Access-Control-Expose-Headers 헤더를 설정해야합니다.

Access-Control-Expose-Headers: Access-Token, Uid

귀하의 답변에 대한 Nick Uraltsev에게 감사드립니다.

당신이 사용하는 사람들을 위해 nodejs을 함께 고르 :

...
const cors = require('cors');

const corsOptions = {
  exposedHeaders: 'Authorization',
};

app.use(cors(corsOptions));
...

당신이 방법으로 응답을 보내는 경우 res.header('Authorization', `Bearer ${token}`).send();

나는 같은 문제에 직면했다. 나는 "WebSecurity.java"에서 이것을 수행했다. cors 구성의 setExposedHeaders 메소드에 관한 것이다.

@Bean
CorsConfigurationSource corsConfigurationSource() {

    CorsConfiguration configuration = new CorsConfiguration();
    configuration.setAllowCredentials(true);
    configuration.setAllowedOrigins(Arrays.asList(FRONT_END_SERVER));
    configuration.setAllowedMethods(Arrays.asList("GET", "POST", "PUT", "DELETE"));
    configuration.setAllowedHeaders(Arrays.asList("X-Requested-With","Origin","Content-Type","Accept","Authorization"));

    // This allow us to expose the headers
    configuration.setExposedHeaders(Arrays.asList("Access-Control-Allow-Headers", "Authorization, x-xsrf-token, Access-Control-Allow-Headers, Origin, Accept, X-Requested-With, " +
            "Content-Type, Access-Control-Request-Method, Access-Control-Request-Headers"));

    UrlBasedCorsConfigurationSource source = new UrlBasedCorsConfigurationSource();
    source.registerCorsConfiguration("/**", configuration);
    return source;
}

나는 그것이 작동하기를 바랍니다.

asp.net 코어에서 동일한 문제에 직면했습니다.

public static class CorsConfig
{
    public static void AddCorsConfig(this IServiceCollection services)
    {
        services.AddCors(options =>
        {
            options.AddPolicy("CorsPolicy",
                builder => builder
                .WithExposedHeaders("X-Pagination")
                );
        });
    }
}

공식 문서 에 따르면 :

서버가 응답 한 HTTP 헤더를 원하는 경우 도움이 될 수 있습니다 . 모든 헤더 이름은 소문자이며 대괄호 표기법을 사용하여 액세스 할 수 있습니다. 예 : response.headers['content-type']헤더 : {},

SpringBoot2의 경우 다음을 추가하십시오.

httpResponse.setHeader("Access-Control-Expose-Headers", "custom-header1, custom-header2");

당신의 CORS 필터 구현 코드에 허용 된 것으로 custom-header1및 custom-header2등

장고의 도움

CORS_EXPOSE_HEADERS = [
        'your header'
    ]

Spring Boot 2의 경우 전역 CORS 구성을 사용하지 않으려면 @CrossOriginatribute와 함께 어노테이션을 사용하여 메소드 또는 클래스 / 컨트롤러 레벨로 수행 할 수 있습니다 exposedHeaders.

예를 들어, 헤더 추가 authorization에 대한 YourController방법 :

@CrossOrigin(exposedHeaders = "authorization")
@RestController
public class YourController {
    ...
}