[Vuejs] request header field User-Agent is not allowed by Access-Control-Allow-Headers

오류 : Script Console Error

request header field User-Agent is not allowed by Access-Control-Allow-Headers
=> http 요청 헤더 속성 User-Agent는 접근
=> IOS (Safari) Script Error 발생
=> AOS (Chrome) 정상

헤더 용어 정의

• Access-Control-Allow-Headers
  크로스 사이트에서 요청에 대한 응답에 포함되며, 허용된 요청의 출처를 식별
  ※ 수신 Server 서버 설정 변경을 통한 허용 가능
• User-Agent
  서버와 네트워크 피어가 요청하는 응용 프로그램, 운영 체제, 공급 업체 및 버전을 식별 할 수있는 특성 문자열

ex) mblSappYn=Y;mblOsDvC=01;mblOsVerNm=12;...;netKind=lte;

테스트 : axios instance headers

const headers = {
	'Content-Type': 'application/json;charset=UTF-8',
  	Cookie: this.cookie, // natvie return
  	'User-Agent': this.userAgent, // natvie return
}

원인

IOS 기본 브라우저 인 Safari의 경우,
응답 서버 의 Access-Control-Allow-Headers 의 User-Agent 헤더 속성을 허용해주어야 함.
Safari 외 브라우저는 이를 무시한다.

확인

1. header User-Agent 속성 제외 => 크로스도메인 로그인 처리불가 확인
2. 크로스 사이트 응답 서버 설정 및 변경 가능 여부 확인 필요
   Access-Control-Allow-Headers > User-Agent

참고

• 블로그 참고 - Safari User-Agent 헤더 허용 이슈