Need help addressing cors issue on server

Question

I have a django backend with react frontend. I am trying to deploy my application on cpanel hosting. I have created subdomain for backend (api.example.com/) and main domain (example.com/) is for frontend. PS: mentioned fake URL. Following is what my settings.py looks like,

INSTALLED_APPS = [
    # Custom Installed
    "corsheaders",
...

MIDDLEWARE = [
    'django.middleware.security.SecurityMiddleware',
    'django.contrib.sessions.middleware.SessionMiddleware',
    'corsheaders.middleware.CorsMiddleware',
    'django.middleware.common.CommonMiddleware',
    'django.middleware.csrf.CsrfViewMiddleware',
    'django.contrib.auth.middleware.AuthenticationMiddleware',
    'django.contrib.messages.middleware.MessageMiddleware',
    'django.middleware.clickjacking.XFrameOptionsMiddleware',
]
...
ALLOWED_HOSTS = [
    'www.example.com',
    'example.com',
    'xxx.yyy.208.227',
]

# ALLOWED_HOSTS = ['*']

CORS_ORIGIN_ALLOW_ALL = False
# CORS_ALLOW_CREDENTIALS = True

CORS_ALLOWED_ORIGINS = [
    'https://www.example.com',
    'https://example.com',
    'https://xxx.yyy.208.227',
]

I am seeing error as mentioned below,

Access to XMLHttpRequest at 'https://api.example.com/api/products/' from origin 'https://www.example.com' has been blocked by CORS policy: No 'Access-Control-Allow-Origin' header is present on the requested resource.

Client Code:

export const getAxiosInstance = () => {
    let retryCount = 0;
    const axiosInstance = axios.create({
        baseURL: BASE_URL,
        withCredentials: true,
    });
    const token = localStorage.getItem('token');
    console.log(`${TAG} Token from getAxiosInstance ${token}`);
    if (!token) {
        return axiosInstance;
    }
    axiosInstance.defaults.headers.common['Authorization'] = `Bearer ${token}`;
    axiosInstance.interceptors.response.use(resp => resp, error => {
        console.log(`getAxiosInstance Intercepting ${error}`);
        if (error.response.status === 403 && retryCount < 3) {
            retryCount++;
            axiosInstance.post(REFRESH, {}, {withCredentials: true}).then((response) => {
                if (response.status === 200) {
                    setDefaultAuthHeader(response.data.token);
                    return axios(error.config);
                }
            });
        }
        if (retryCount >= 3) {
            alert('Login again!');
        }
        return error;
    });
    return axiosInstance;
}
.
.
.
const axiosInstance = getAxiosInstance();
axiosInstance.get('/api/products').then(response => {
    // Doing something
})
.
.
.

Even with following configuration, I am having same issue,

Am I missing something?