[에러] Uncaught (in promise) SyntaxError: Unexpected token < in JSON at position 0

리액트 프로젝트에서 다음과 같이 fetch를 사용해서 API호출로 JSON 데이터를 가져오려고 했을때 SyntaxError가 났다.

fetch('/api')
      .then(res=>res.json())
      .then(data=>this.setState({username:data.username}));

에러 메시지

Uncaught (in promise) SyntaxError: Unexpected token < in JSON at position 0

JSON 데이터의 맨 앞자리가 '<' 라서 뜨는 SyntaxError다. 구글링 해보니 JSON 데이터를 보내주는 서버에서 JSON 타입이라고 명시하지 않았기 때문에 생기는 에러 메시지였다

해결법

다음과 같이 fetch에서 헤더 내 Content-Type과 Accept에 application/json을 명시해주니 깔끔하게 문제가 해결되었다.

fetch('/api', {
      headers : { 
        'Content-Type': 'application/json',
        'Accept': 'application/json'
       }
      })
      .then(res=>res.json())
      .then(data=>this.setState({username:data.username}));

Thank You, Abdennour TOUMI.

* 참고 문서 : stackoverflow.com/questions/37269808/react-js-uncaught-in-promise-syntaxerror-unexpected-token-in-json-at-posit

React Js: Uncaught (in promise) SyntaxError: Unexpected token < in JSON at position 0