[React Native] IOS Axios Network Error 해결

💡서문

먼저 cors에러라던지, 혹은 네트워크 에러라던지 어디가 문제인지 정확히 파악이 안된 상태의 에러라면, 나의 현재 상황과 이를 해결하고자 방문하는 많이 사이트의 상황을 비교해야 하는게 매우 중요한 것 같습니다 :)
같은 에러라도 발생시점이 다 다르니깐요

🧐문제상황

로컬에 8999 포트로 서버를 구동하고 있습니다.
서버는 spring boot + jpa를 활용하여 만들어 줬는데요, ios 에뮬레이터가 아닌 expo 앱을 사용하여 직접 휴대폰으로 접속을 했는데, 서버로부터 데이터를 패치하는 과정에서 Axios Network 에러가 났습니다.

일단 서버에서 모든 경로의 요청을 허용하도록 설정해 주었습니다.

WebConfig.java

...
 @Override
  public void addCorsMappings(CorsRegistry registry) {
    registry.addMapping("/**").allowedMethods("*")
        .allowedOriginPatterns("*")
        .allowedHeaders("*")
        .allowCredentials(true);
  }
...

🔍해결

보통 앱을 만들거나 웹을 만들때, 해당 노트북/랩탑 에서 에뮬레이터나 웹을 띄워서 작업을 하는 경우가 많다보니, axios url속에 localhost 를 작성했더군요

[ 변경 전 ]

function createInstaceWithAuth(url) {
  return axios.create({
    baseURL: `localhost:8999/${url}`,
    responseType: 'json',
    withCredentials: true,
  })
}

이렇게 하면 제 휴대폰이 localhost를 잘 캐치할리가 없죠 .

그래서 현재 IP 주소를 받아, 이를 기반으로 baseURL을 생성해주도록 했습니다!

[ 변경 후 ]

import axios from 'axios'
import Constants from 'expo-constants'  //현재 단말기의 시스템 정보를 불러오기 위함

const { manifest } = Constants

function createInstaceWithAuth(url) {
  return axios.create({
    baseURL: `http://${manifest.debuggerHost.split(':').shift()}:8999/${url}`,
    responseType: 'json',
    withCredentials: true,
  })
}

[참고]
https://docs.expo.dev/versions/latest/sdk/constants/