axios로 react native 와 spring 연결 불가

안녕하세요. 현재 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 인턴입니다. 예진안님.

React Native에서 Spring Boot와의 연결이 안 되는 문제를 겪고 계신 것 같습니다. axios에서 “Network Error”가 발생하는 주요 원인 몇 가지를 소개해 드리겠습니다.

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 문제를 해결할 수 있습니다. 관련 문서 링크.
에뮬레이터 네트워크 설정 문제:
- 에뮬레이터의 네트워크 설정이 클 수 있으니, 네트워크 연결이 올바른지 확인해 보세요.

위의 사항들을 한 번씩 확인해 보시고 다시 시도해 보시면 좋겠습니다. 문제가 해결되지 않을 경우 추가적인 디버깅이 필요할 수 있습니다. 감사합니다.

인프런 커뮤니티 질문&답변