title: Request header field X-CSRFToken is not allowed by Access-Control-Allow-Headers in preflight response
body: <p>I'm trying to make an API call to the GroupMe API to fetch a JSON response but have been getting the following error:</p>
  
  <pre><code>XMLHttpRequest cannot load ...(call url)... 
  Request header field X-CSRFToken is not allowed by Access-Control-Allow-Headers in preflight response.
  </code></pre>
  
  <p>My Javascript looks like this:</p>
  
  <pre><code>var xmlhttp = new XMLHttpRequest();
  var url = (call url)
  
  xmlhttp.onreadystatechange = function() {
      if (xmlhttp.readyState == 4 &amp;&amp; xmlhttp.status == 200) {
  
      xmlhttp.open("GET", url, true);
      xmlhttp.setRequestHeader("Access-Control-Allow-Headers", "*");
      xmlhttp.setRequestHeader('Access-Control-Allow-Origin', '*');
  
      $.getJSON(url, function(data){
          var array = data.response.messages.reverse();
          for(i = 0; i&lt;array.length; i++){
              $('.messages').append("&lt;div class='message'&gt;"+array[i].name+":&lt;br&gt;"+array[i].text+"&lt;/div&gt;");
          }
      });
      }
  }
  
  xmlhttp.open("GET", url, true);
  xmlhttp.send();
  </code></pre>
  
  <p>I don't really understand how request headers work so I am guessing I'm not setting the headers correctly. Can someone point me in the right direction as to how I can set the headers to fix this issue?</p>