reactjsnext.jsaxios

Axios does not decode data value


When I try to use Axios in serverSideProps I get a strange data value, at first, I thought it was a Redux issue, but no, if I replace Axios with Fetch everything works correctly. Outside of serverSideProps Axios also works well.

export async function getServerSideProps() {
  const res = await axios.get(
    `https://jsonplaceholder.typicode.com/posts/`
  );
  console.log(res.data);

  // const res = await fetch(`https://jsonplaceholder.typicode.com/posts/`);
  // console.log(await res.json());

  return {
    props: {} 
  };
}

value I get

codeSandbox example


Solution

  • The problem is with axios v1.2.0 itself. You need to add Accept and Accept-Encoding headers as a temporary solution until the issue is solved:

    const res = await axios.get('https://jsonplaceholder.typicode.com/posts', {
        headers: {
          Accept: 'application/json',
          'Accept-Encoding': 'identity'
        }
    })
    

    Github discussion about this problem.