axios로 react native 와 spring 연결 불가

Question

안녕하세요. 현재 rn으로 안드로이드 어플을 만들고 있습니다. 저는 프런트 역할을 맡았습니다. spring과 연결을 확인하려고 정말 최소한의 값만 받아오려고 하는데요. 현재 axios를 사용해서 아래 코드처럼 /demo 을 받아와서 결과값으로 배열이 프런트쪽에서 보여져야하는데, (.env 폴더 만들어서 API_URL=http://10.0.2.2:3105 로 설정 ip를 저걸로 설정한 이유는 에뮬레이터의 경우에 저 ip가 에러 없이 잘 연결된다고 해서 바꿨습니다.) useEffect(() => { axios .get(`${Config.API_URL}/demo`) .then(response => setHello(response.data)) .catch(error => console.log(error)); }, []); [AxiosError: Network Error] 라는 메시지만 콘솔에 뜹니다. 그래서 spring말고 JSONPlaceholder - Free Fake REST API 에서 get에 user 유저 수를 받아왔을 때는 또 받아와지더라구요. 그래서 spring연결할 때는 또다른 환경설정을 해줘야하는지 axios를 저렇게 사용하면 안되고 다른 코드로 연결해야하는지가 궁금합니다.   현재 spring port번호도 3105로 변경해놨습니다. 프런트에서도 실제 제 ip 번호도 바꿔보고 localhost로도 연결해봤지만 안됩니다.

인프런 AI 인턴 · Answer

안녕하세요, 인프런 AI 인턴입니다. 예진안님. React Native에서 Spring Boot와의 연결이 안 되는 문제를 겪고 계신 것 같습니다. axios에서 &ldquo;Network Error&rdquo;가 발생하는 주요 원인 몇 가지를 소개해 드리겠습니다. IP 주소 확인 : Android 에뮬레이터에서 10.0.2.2 는 localhost를 가리키므로, 사용하신 설정이 맞습니다. 실제 디바이스를 사용하고 계시다면, PC의 IP 주소를 사용해야 합니다. Spring Boot 서버 상태 확인 : http://10.0.2.2:3105/demo 로 브라우저에서 직접 해당 엔드포인트에 접근해 응답이 있는지 확인해 보세요. 스프링 부트 서버가 에러 없이 실행 중인지 확인해 보세요. CORS 설정 : Cross-Origin Resource Sharing(CORS) 설정이 필요할 수 있습니다. Spring Boot를 사용하는 경우 CORS 설정은 @CrossOrigin 어노테이션을 사용하거나, WebMvcConfigurer를 통해 가능합니다. @Configuration public class WebConfig implements WebMvcConfigurer { @Override public void addCorsMappings(CorsRegistry registry) { registry.addMapping("/**") .allowedOrigins("http://10.0.2.2:3105") .allowedMethods("GET", "POST", "PUT", "DELETE", "HEAD"); } } 위와 같은 설정을 통해 CORS 문제를 해결할 수 있습니다. 관련 문서 링크 . 에뮬레이터 네트워크 설정 문제 : 에뮬레이터의 네트워크 설정이 클 수 있으니, 네트워크 연결이 올바른지 확인해 보세요. 위의 사항들을 한 번씩 확인해 보시고 다시 시도해 보시면 좋겠습니다. 문제가 해결되지 않을 경우 추가적인 디버깅이 필요할 수 있습니다. 감사합니다.