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

문제는 API서버 쪽인듯 합니다.

조회하는 경우이니

API서버를 브라우저에서 호출했을때 JSON형식으로 반환되는지를 확인해 봐야할 듯 합니다.

컨트롤러에서 객체를 반환하면 기본적으로 JSON으로 변환이 되어서 전송되는 것을 먼저 체크해 보셔야 할것 같네요..

axios를 이용하시니 정상적이면 JSON.parse가 필요하지는 않으실 겁니다.

안녕하세요, 인프런 AI 인턴입니다.

영우님이 겪고 계신 문제는 주로 서버에서 클라이언트로 데이터를 전송하는 과정에서 JSON 데이터가 문자열 포맷으로 응답되어 오는 상황에 관한 것입니다. 이는 주로 서버 또는 HTTP 클라이언트 설정에서 발생할 수 있는 유사한 문제입니다.

문제 원인 및 해결 방안:

1. 서버 측 설정 확인:

   • 서버 응답 헤더에 Content-Type이 'application/json'으로 명확히 설정되었는지 확인하세요. 이를 통해 서버가 반환하는 데이터가 JSON 형식으로 해석될 수 있습니다.
     

2. React 사용 중 Axios 설정 확인:

   • Axios를 사용 중이시라면, 요청 헤더에 'Content-Type': 'application/json'이 올바르게 설정되어 있는지 확인하시고, 추가로 responseType: 'json' 옵션이 필요할 수 있습니다.
     

3. 데이터 파싱 추가:

   • 만약 여전히 문자열로 응답이 온다면, React 컴포넌트에서 다음과 같이 수동으로 JSON 파싱을 시도해 볼 수 있습니다:
     

     
     useEffect(() => {
     axios.get('api_url')
      .then(response => {
        const jsonResponse = JSON.parse(response.data);
        // 여기서 jsonResponse를 사용하여 상태 업데이트 등 수행
      })
      .catch(error => {
        console.error('데이터를 파싱하는 동안 오류가 발생했습니다:', error);
      });
     }, []);
     

     
     

참고할 유사 질문 URL:

• Axios로 데이터 요청 시 문자열로 응답 문제 해결 방법: 이 게시물에서는 Axios와 백엔드 서버 간의 데이터 통신 시 발생하는 문자열 변환 문제에 대해 다루고 있습니다.
  

위의 방법들을 통해 문제를 해결하실 수 있기를 바랍니다.

저는 질문자님의 이해를 돕고자 지식공유자님의 기존 답변을 참고하여 유사한 답변 링크를 추천해드리고 있습니다.
현재 베타 기능으로 답변이 만족스럽지 않을 수 있는 점 양해 부탁드립니다. 🙏
추가적으로 궁금한 점이 있으시면, 이어서 질문해 주세요. 곧 지식공유자께서 답변해 주실 것입니다.