How to solve CORS header 'Access-Control-Allow-Origin' missing in django project

This question asked saveral time .Sorry for asking again. i am asking it again because my problem is not solved.I have a Django project and a html file in which i want to show the result f api.but when i try it throw CORS error. i have try a lot .but nothing happen. I had install cors header and add in installed apps and in middleware.but occuring same problem. my settings.py

ALLOWED_HOSTS = ['*']

INSTALLED_APPS = (
    'django.contrib.admin',
    'django.contrib.auth',
    'django.contrib.contenttypes',
    'django.contrib.sessions',
    'django.contrib.messages',
    'django.contrib.staticfiles',
    'city',
    'corsheaders',

    'rest_framework'

)

MIDDLEWARE_CLASSES = (
    'django.contrib.sessions.middleware.SessionMiddleware',
    'corsheaders.middleware.CorsMiddleware',
    'django.middleware.common.CommonMiddleware',
    'django.middleware.csrf.CsrfViewMiddleware',
    'django.contrib.auth.middleware.AuthenticationMiddleware',
    'django.contrib.auth.middleware.SessionAuthenticationMiddleware',
    'django.contrib.messages.middleware.MessageMiddleware',
    'django.middleware.clickjacking.XFrameOptionsMiddleware',
    'django.middleware.security.SecurityMiddleware',
)

ROOT_URLCONF = 'cityState.urls'
CORS_ORIGIN_ALLOW_ALL = True
Access-Control-Allow-Origin: *

my html file is

<!DOCTYPE html>
<html>
    <title>CP Project</title>
    <head>

    </head>
    <body>
        Country : <select class="country" onchange="changeCountry(this)">

        </select><br/>
        State : 
        <select class="state" onchange="changeState(this)">

        </select><br/>
        City : 
        <select class="city" onchange="changeCity(this)">

        </select>

        <script>
            response.addHeader("Access-Control-Allow-Origin", "*");
            var xhr = new XMLHttpRequest({mozSystem: true});

            var country = document.querySelector(".country");
            var state = document.querySelector(".state");
            var city = document.querySelector(".city");

            var countryList = {};
            var stateList = {};
            var cityList = {};
            // Access-Control-Allow-Origin: http://127.0.0.1:8002/data/ ;
            // Access-Control-Allow-Methods: POST, GET, OPTIONS;

            getCountryList(function(response){
                countryList = response;
                var tempStr = "";
                /*for(var i in response.result){
                    tempStr+="<option value="+i+">"+response.result[i]+"</option>";
                }*/
                for(var i=0;i<response.length; i++){
                    tempStr+="<option value="+response[i].countryId+">"+response[i].country+"</option>";
                }
                country.innerHTML = tempStr;
            });

            function changeCountry(this_){

                getStateList(this_.value, function(response){
                    stateList = response;
                    var tempStr = "";
                    /*for(var i in response.result){
                        tempStr+="<option value="+i+">"+response.result[i]+"</option>";
                    }*/
                    for(var i=0;i<response.length; i++){
                        tempStr+="<option value="+response[i].state_id+">"+response[i].state+"</option>";
                    }
                    http.open("GET", "http://127.0.0.1:8002/data/country/", true);
                    http.send();
                    state.innerHTML = tempStr;
                });
            }

            function changeState(this_){

                getCityList(this_.value, function(response){
                    cityList = response;
                    var tempStr = "";
                    /*for(var i in response.result){
                        tempStr+="<option value="+i+">"+response.result[i]+"</option>";
                    }*/
                    for(var i=0;i<response.length; i++){
                        tempStr+="<option value="+response[i].cityid+">"+response[i].city+"</option>";
                    }
                    city.innerHTML = tempStr;
                });
            }


            function getCountryList(callBackFun){
                var http = new XMLHttpRequest();
                http.onreadystatechange = function(){
                    if (this.readyState === 4){
                        callBackFun(JSON.parse(this.responseText));
                    }
                };
                http.open("GET", "http://127.0.0.1:8002/data/country/", true);
                http.send();
            }

            function getStateList(countryCode, callBackFun){
                var http = new XMLHttpRequest();
                http.onreadystatechange = function(){
                    if (this.readyState === 4){
                        callBackFun(JSON.parse(this.responseText));
                    }
                };
                http.open("GET", "http://127.0.0.1:8002/data/state?count_id="+countryCode, true);
                http.send();
            }

            function getCityList(stateCode, callBackFun){
                var http = new XMLHttpRequest();
                http.onreadystatechange = function(){
                    if (this.readyState === 4){
                        callBackFun(JSON.parse(this.responseText));
                    }
                };
                http.open("GET", "http://127.0.0.1:8002/data/cities/?sta_id="+stateCode, true);
                http.send();
            }
        </script>
    </body>
</html>