axios를 사용하여 이미지 데이터 (PNG 이미지) 얻기 REST-API를 두드렸을 때 이미지 데이터가 예상대로 얻을 수 없어서 빠졌기 때문에 메모를 남깁니다.

어떤 상황인가?

전술한 바와 같이, axios (을)를 사용해 이미지 취득의 REST-API 를 실행~이미지 취득, 거기에 플러스 해 base64 encode 한 캐릭터 라인을 프런트 엔드에 보내는 것이 목적.
구성과 일련의 흐름은 다음과 같은 느낌.

구성

구성

フロントエンド ⇔ バックエンドA ⇔ バックエンドB

흐름

프런트 엔드에서 백엔드 A로 이미지 캡처 API 실행

백엔드 A는 중개인과 같은 서 위치에서 백엔드 B에 대한 이미지 획득 API를 실행. 여기서 axios를 사용하십시오

이미지가 백엔드 B에서 백엔드 A로 응답으로 반환됩니다

백엔드 A는 base64로 인코딩하여 프런트 엔드로 반환합니다

프런트 엔드는 base64로 인코딩되고 반환 된 문자열을 dataURL로 표시합니다.

그래서 백엔드 B에서 백엔드 A로 되돌아온 response에는 바이너리 데이터 같은 문자화된 문자열이 있어 이것을 열심히 base64 인코딩하고 있었다.

여기서, 이 「바이너리 데이터 같은 문자화된 문자열」이 response 로 돌아오고 있는 것이 이상하다, 라고 눈치채지 못한 것이 빠진 원인.

반환되는 이미지 데이터는 arraybuffer가 정확합니다.

그래서 결론을 쓰면 axios의 인스턴스를 create 할 때 설정하는 파라미터에 문제가 있었다.

다음에 쓸모 없었던 케이스와 예상대로 움직인 케이스를 나타내지만, responseType 와 Content-Type 에 json 를 지정한 것이 잘못. 화상 데이터를 취득할 때는, 각각 arryabuffer 와 (PNG 화상의 경우는) image/png 를 지정할 필요가 있었다.

이미지 획득이 정상적으로 수행되지 않은 경우

설정할 파라미터

var instance = axios.create({
  'responseType': 'json',
  'headers': {
    'Content-Type': 'application/json'
  }
});

그 때의 순서가 이쪽.

화상 취득이 정상적으로 행한 경우

설정할 파라미터

var instance = axios.create({
  'responseType': 'arraybuffer',
  'headers': {
    'Content-Type': 'image/png'
  }
});

그 때의 순서가 이쪽.

어떻게 느끼는지 늦었는가

자신의 지식/경험 부족과 끈질긴 것 같지만, 앞의 "바이너리 데이터 같은 문자 화 된 문자열"이 돌아온 것이 원인.
「바이너리 데이터를 취득하고 있으니까, 그럼 문자 깨져 있어요」라고 생각하고 있었다.
그래서 base64 인코딩을 할 때의 구현에 문제가 있다고만 (여기에서도) 생각해, 그쪽의 처리의 재검토와 시행착오만을 반복하고 있었다.

실제로 base64 인코딩의 처리는 문제 없고, 이미지 취득의 REST-API 를 두드릴 때에 axios 로 설정하는 파라미터가 잘못되었다고 하는 이야기.

덤

base64 인코딩의 처리는 구그라면 얼마든지 발견되지만, 아래와 같은 느낌.

base64 인코딩 처리

/**
 * 画像データを base64 エンコード
 *
 * @param {array} imgData
 */
function base64Encode(imgData) {
  // arraybuffer で渡された imgData を base64 エンコードする
  const base64Encoded = imgData.toString('base64');
  return base64Encoded;
}