Local React app pointing to hosted Django server CORS no 'Access-Control-Allow-Origin' header

I am running a local version of my react app on localhost:3000 and am trying to hit endpoints on a Django server hosted on heroku

Error encountered on each axios request: Access to XMLHttpRequest has been blocked by CORS policy: no 'Access-Control-Allow-Origin' header is present

Current settings.py for Django server:

ALLOWED_HOSTS=['*']

INSTALLED_APPS = [
    'django.contrib.admin',
    'django.contrib.auth',
    'django.contrib.contenttypes',
    'django.contrib.sessions',
    'django.contrib.messages',
    'corsheaders',
    'whitenoise.runserver_nostatic',
    'django.contrib.staticfiles',
    'accounts',
    'blog',
]
MIDDLEWARE = [
    'corsheaders.middleware.CorsMiddleware',
    'django.middleware.security.SecurityMiddleware',

    # Whitenoise
    'whitenoise.middleware.WhiteNoiseMiddleware',

    'django.contrib.sessions.middleware.SessionMiddleware',
    'django.middleware.common.CommonMiddleware',
    'django.middleware.csrf.CsrfViewMiddleware',
    'django.contrib.auth.middleware.AuthenticationMiddleware',
    'django.contrib.messages.middleware.MessageMiddleware',
    
    
    #'django.middleware.clickjacking.XFrameOptionsMiddleware',

    # Machina
    #'machina.apps.forum_permission.middleware.ForumPermissionMiddleware',
]

# CORS
CORS_ALLOW_ALL_ORIGINS = True
CORS_ALLOW_CREDENTIALS = False

Since I am allowing all origins to make requests, it seems like this type of CORS issue should be disabled. I have tried removing all other middleware except CorsMiddleware and it it did not make a difference.

A bit stumped at this point because my configuration seems correct as per https://github.com/adamchainz/django-cors-headers

Here is an example api call from my react app that is causing the "no 'Access-Control-Allow-Origin' header"

function callCSRFApi(){
  return axios.request({
    method: 'GET',
    url: 'http://example.com/csrf/',
  });
}

One thing to note is that I am hitting endpoints on the Django server even though it is not configured as a django_rest api.

I have also tried setting a custom middleware which should always define Access-Control-Allow-Origin, but still received that the header was missing:

class CorsMiddleware(object):
    def __init__(self, get_response):
        self.get_response = get_response

    def __call__(self, request):
        response = self.get_response(request)
        if (request.method == "OPTIONS"  and "HTTP_ACCESS_CONTROL_REQUEST_METHOD" in request.META):
            response = http.HttpResponse()
            response["Content-Length"] = "0"
            response["Access-Control-Max-Age"] = 86400
        response["Access-Control-Allow-Origin"] = "*"
        response["Access-Control-Allow-Methods"] = "DELETE, GET, OPTIONS, PATCH, POST, PUT"
        response["Access-Control-Allow-Headers"] = "accept, accept-encoding, authorization, content-type, dnt, origin, user-agent, x-csrftoken, x-requested-with"
        return response

My thoughts are that the problem could be because we don't have the Django server configured as a django_rest app, or that django has logic where it can't be accessed from localhost.

Note:

• I test in an incognito window after reading that others were having trouble with the cache
• Have tried reverting to an earlier version of django-cors-headers
• Have tried without CORS_ALLOW_CREDENTIALS = False
• Python 3.7, Django 3.0.7, django-cors-headers 3.5.0, React 17.0.1, axios 0.21.0