React Native 디버깅 axios 관련 에러

HBJ·2022년 7월 30일
0

ReactNative

목록 보기
1/1

1. 에러 유발 코드 (수정 전 코드)

```
const newUserInfo = await axios.post('auth/token/refresh',
  {
    headers: {
      'accept': 'application/json',
      'access-token': props.token,
      'client-type': '2100',
    }
  }
);
```

2. 에러메시지

Error: Exception in HostFunction: Malformed calls from JS: field sizes are different.

[[31,34],[0,0],[[586,587]],292]

3. 에러 이유: POST 요청의 동작을 위해 실제 서버가 요구하는 request의 형식과 내가 작성한 axios 관련 코드에 의해 만들어지는 request의 형식이 상이했음.

아래는 서버에서 요구한 request의 Curl 방식 표현

curl -X 'POST' \
  'http://49.50.175.211:3389/v1/auth/token/refresh' \
  -H 'accept: application/json' \
  -H 'access-token: eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJkb21haW4iOiJLQUtBTyIsImV4cCI6MTY1OTE2ODUzNiwic3ViIjoiMjI4MzE4NjI3MyJ9.8GdJ_cY5fyYdNZHNvTOOhxAuAOvydMpSSVbKv18tqzw' \
  -H 'client-type: 2100' \
  -d ''

이때, -d ''의 존재가 문제였다.

4. 수정된 코드

const newUserInfo = await axios.post('auth/token/refresh',
      {
      //이 중괄호는 -d ''를 request에 포함시키기 위함이다. 
      },
      {
        headers: {
          'accept': 'application/json',
          'access-token': props.token,
          'client-type': '2100',
        }
      }
    );

5. 결론

  1. 서버에서 요구하는 request에 -d '' 가 있으면(즉, 빈 문자열이라도 데이터 필드로 받으면), axios.post({기본 URL 필드}, {데이터 필드}, {URL의 끝에 추가되는 파라미터 또는 헤더의 필드}) 에서 두번째 인자인 {데이터 필드}를 빈 괄호라도 넣어주자.
  2. 에러 메시지로 Malformed calls from JS: field sizes are different. 가 뜨면 서버에서 요구한 request 형식과 내가 작성한 코드에 의해 전달되는 request가 상이한지 확인하자.

0개의 댓글