Axios does not decode data value

Question

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

Answer 1

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.