Django is returning JsonResponse, can see the desired JSON response in browser Network tab, but unable to access on the FE

Question

Not quite sure what I'm doing wrong here.

I have a method in utils.py that returns the dictionary:

import boto3
import base64


# Create a Rekognition client
def detect_faces(photo):
    ...
    return {
        'comment': comment,
        'rekognition_response': response,
        'url': url,
    }

Which sent back to the views.py :

from django.shortcuts import render
from django.http import JsonResponse, HttpResponse

from . import utils

def index(request):
    return render(request, 'index.html')

def submit(request):
    response = utils.detect_faces(request.body)
    return JsonResponse(response)

I can see the response I'm expecting in the Network tab of the browser:

But then on FE, I'm not seeing it in the res :

const submitScreenshot = async () => {
  const picture = document.getElementById('webcam-picture-submit').src;
  const res = await fetch('/submit/',
  {
    method: 'POST',
    headers: {
      'X-CSRFToken': csrftoken 
    },
    body: picture.replace('data:image/png;base64,','')
  })
  console.log(res);
  console.log('Submitted.');
};

I get the sense this is something super basic I'm missing, what is it?

Answer 1

As documented you have to receive data from Response which is also Promise

The fetch() method takes one mandatory argument, the path to the resource you want to fetch. It returns a Promise that resolves to the Response to that request, whether it is successful or not

fetch('http://example.com/movies.json').then(response => response.json()).then(data => console.log(data));