Unexpected token I in JSON at position 0

Question

I am trying to send a fetch Request with BASE64 Encoded BLOB data.

When validating the JSON through different services, it proves as valid JSON.

export function sendRecording1(blob){
let base64data; 
var reader = new FileReader();
reader.readAsDataURL(blob); 
reader.onloadend = function() {
  base64data = reader.result;                
  //base64data = base64data.substring(22);

  base64data = base64data.toString();

  let body = JSON.stringify({text: base64data, id: "blob"});
  //console.log(body);
    return fetch(url, {
    method: "POST", // or 'PUT'
    async: true,
    //body: JSON.stringify({ text: base64data, id: "blob" }), 
    body: body,
    headers: {
      "Access-Control-Allow-Origin": "*",
      "Content-Type": "application/json"
    }
  }).then(res => res.json())

But it seems like fetch() doesnt like that Base 64 Body and gives me the Error: Error: SyntaxError: Unexpected token I in JSON at position 0

This also seems to happen when the body is reaching over 100.000bytes. Which is weird as it was working when I had other files that big.

The Base64 Data are being made from a .WAV file for voice recording.

Answer 1

I have faced this issue few weeks back not sure exactly what I did. try this and debug it will help.

 // .then(res => res.json()) // comment this out for now
  .then(res => res.text())          // convert to plain text
  .then(text => console.log(text))  // then log it out

https://daveceddia.com/unexpected-token-in-json-at-position-0/