title: Enable CORS in a Django Apache Project
body: <p>I have an Django project that runs on Apache. With Javascript and Python i make request on diffrent sites. I always get following error:</p>
  
  <p><code>Access to XMLHttpRequest at 'site' from origin 'site2' has been blocked</code></p>
  
  <p>I already tried diffrent things. I installed django-cors-headers and edited my files:</p>
  
  <p>Settings.py: </p>
  
  <pre><code>INSTALLED_APPS = [
      'django.contrib.admin',
      'django.contrib.auth',
      'django.contrib.contenttypes',
      'django.contrib.sessions',
      'django.contrib.messages',
      'django.contrib.staticfiles',
      # 'webpack_loader',
      'corsheaders',
      'projects',
      'viewer',
      'api_manager',
  ]
  
  MIDDLEWARE = [
      'corsheaders.middleware.CorsMiddleware',
      'django.middleware.security.SecurityMiddleware',
      'django.contrib.sessions.middleware.SessionMiddleware',
      'django.middleware.common.CommonMiddleware',
      'django.middleware.csrf.CsrfViewMiddleware',
      'django.contrib.auth.middleware.AuthenticationMiddleware',
      'django.contrib.auth.middleware.RemoteUserMiddleware',
      'django.contrib.messages.middleware.MessageMiddleware',
      'django.middleware.clickjacking.XFrameOptionsMiddleware',
  ]
  
  CORS_ORIGIN_ALLOW_ALL = True
  
  </code></pre>
  
  <p>In my HTML i added following to the form:</p>
  
  <pre><code>&lt;form class="d-flex flex-column" id="loginForm"&gt;
            {% csrf_token %}
  &lt;/form&gt;
  </code></pre>
  
  <p>With the following method i was able to get a CSRF Token:</p>
  
  <pre><code>static getCookie(name) {
      let cookieValue = null;
      if (document.cookie &amp;&amp; document.cookie !== '') {
        let cookies = document.cookie.split(';');
        for (let i = 0; i &lt; cookies.length; i++) {
          let cookie = cookies[i].trim();
          // Does this cookie string begin with the name we want?
          if (cookie.substring(0, name.length + 1) === (name + '=')) {
            cookieValue = decodeURIComponent(cookie.substring(name.length + 1));
            break;
          }
        }
      }
      return cookieValue;
    }
  </code></pre>
  
  <p>And the call which needs CORS i already tried to add the correct Headers:</p>
  
  <pre><code>xhr.addEventListener('readystatechange', function () {
      if (this.readyState === 4) {
        if (this.status != 200) {
          console.log("Error", this.statusText);
        }
      }
    });
  
    xhr.onerror = function(e) {
      console.log("Error: " + e + "URL: " + url);
    }
  
    xhr.open(method, url, false);
    xhr.setRequestHeader('Authorization', auth);
    xhr.setRequestHeader('Content-Type', 'application/json');
    // xhr.setRequestHeader('Access-control-allow-origin', '*');
    xhr.setRequestHeader('Access-Control-Allow-Origin', '*');
  
    var token = Fetcher.getCookie('csrftoken');
    console.log(token);
    xhr.setRequestHeader('X-CSRFToken', token);
    xhr.send(data);
  </code></pre>
  
  <p>I dont know what I am missing. Does anyone know what i need to edit?</p>