[Web🌐] 클라이언트/서버 Response Header 불일치 오류

환경

- 클라이언트(port: 3000)

- 서버(port: 8080)

- CORS 설정 완료

Access-Control-Allow-Credentials: true
Access-Control-Allow-Headers: *
Access-Control-Allow-Methods: *
Access-Control-Allow-Origin: <클라이언트 도메인>

 

에러 현상

- 서버(8080)에서 'X-Custom-Header'라는 특정 RESOPONSE HEADER를 localstorage에 담았지만 클라이언트(3000)에서 확인 불가

⚠️RESOPONSE와 기본적인 RESOPONSE HEADER 공유 O⚠️

 

해결

CORS를 사용하여 클라이언트에서 특정 응답 헤더를 받으려면, Access-Control-Expose-Headers를 설정해야 한다.

Access-Control-Allow-Credentials: true
Access-Control-Allow-Headers: *
Access-Control-Allow-Methods: *
Access-Control-Allow-Origin: <클라이언트 도메인>
Access-Control-Expose-Headers: X-Custom-Header

<property name="allowCredentials" value="true" />
	<property name="allowedHeaders" value="*" />
	<property name="allowedMethods" value="*" />
	<property name="allowedOrigins" value="클라이언트 도메인" />
	<property name="exposedHeaders">
		<list>
			<value>X-Custom-Header</value>
		</list>
</property>