[Vuejs] axios header Cookie 설정

cross domain 서비스 호출

IOS 이슈 발생

IOS Native 브릿지 함수 서비스 비동기 다건 동시 호출 문제 확인 > IOS 구조적 문제
ex) AOS의 경우, 터널이 여러개라 동시 다건 응답 정상
반면, IOS의 경우, 터널이 한 개뿐이라 동시 다건 요청 시, 한개만 응답 정상, 나머지는 undefined

해결방안 : client to client (proxy to was) 직접 통신

• check-list

1. mobile web 개발 환경
2. axios를 통한 다른 도메인 서버 로그인 처리가 필요한 API 호출
3. domain에 대한 Cookie 정보는 Native에서 관리
4. damain 개발계 외부망(LTE) 방화벽 확인 완료

1. Get Cookie, User-Agent From Native

• Cookie : 대외 플랫폼 로그인 처리를 위한 SESSION, ssotoken
• User-Agent : 사용자 모바일, 접속 정보

this.cookieStr = this.getNativeCookie();
this.userAgentStr = this.getNativeUserAgent();

2. http header 설정

const headers = {
  'Content-Type': 'application/json;charset=UTF-8',
  Cookie: this.cookieStr,
  'User-Agent': this.userAgentStr,
};

3. axios 객체 생성

createAxiosInstance(withCredentials = false, headers = {}) {
  const instance = this.$axios.create({
    withCredentials,
    headers,
  }
  return instance;
}

4. axios post 호출

let response;
const baseURL = 'https://devwww.pjh.com';
const param = { svId: 'selMemDvC', mbNo : '999999' };
if (commonUtil.isMobileApp()) {
  // 모바일 앱 : Native에서 관리하는 Cookie 정보 header 전달 > 로그인 처리
  const axiosInstance = this.createAxiosInstance(true, headers);
  response = await axiosInstance.$post(baseURL, param);
} else {
  // 로컬 브라우저 : 개발계 임시 로그인 처리 서비스 호출 > 로그인 처리 > 다른 서비스 호출
  reponse = await this.$axios.$post(baseURL, param);
}
return response;