title: (Jquery, Ajax, Django, Cors, GET) No 'Access-Control-Allow-Origin' header - Cors Whitelist Ignored
body: <p>I know this issue crops up a lot but I have yet to find a secure solution.(Note I have anonymised the urls below.)  </p>
  
  <p><strong>Problem:</strong></p>
  
  <ul>
  <li>I have set up a Apache server running Django as a restful API on serverA</li>
  <li>on serverB I have a simple jquery AJAX GET request </li>
  <li>When the request is sent I get a "No 'Access-Control-Allow-Origin' header"  Error but the origin is in the cors whitelist</li>
  </ul>
  
  <p><strong>Notes:</strong></p>
  
  <ul>
  <li>I have installed Cors Headers in Django as per <a href="https://pypi.org/project/django-cors-headers/" rel="nofollow noreferrer">https://pypi.org/project/django-cors-headers/</a></li>
  <li>I have added serverB's url to CORS_ORIGIN_WHITELIST</li>
  <li>If I set CORS_ORIGIN_ALLOW_ALL = True it works fine (but insecure)</li>
  <li>Opening the url directly gives me the correct json response</li>
  </ul>
  
  <p><strong>Code:</strong></p>
  
  <p>Jquery on ServerB:</p>
  
  <pre><code>getValueWithKey : function(table, key, callback){
      uri = "serverA.com/{0}/{1}".format(table, key)
      $.ajax({
        url: uri,
        type:"GET"
        crossDomain: true,    
        dataType: 'json'
     }).done(function(data) {
         console.log(data);
         callback(data);
     });
  },
  </code></pre>
  
  <p>Headers(As per chrome console):</p>
  
  <pre><code>General:
  Request URL: http://serverA.com/tablename/keyname
  Request Method: GET
  Status Code: 200 OK
  Remote Address: serverA.com
  Referrer Policy: no-referrer-when-downgrade
  
  Response Headers:
  Content-Type: application/json
  
  Request Headers:
  !Provisional headers are shown
  Accept: application/json, text/javascript, */*; q=0.01
  Origin: http://serverB.com
  Referer: http://serverB.com/test.html
  User-Agent: Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/68.0.3440.106 Safari/537.36
  </code></pre>
  
  <p>Thanks for the help!</p>