title: How to set the Access-Control-Allow-Origin to "*" using XMLHttpRequest object?
body: <p>I am trying to send a request to my <strong>api</strong> deployed in Heroku. I used an <em>XMLHttpRequest</em> object to fire a request to the api. I am trying out a simple 
  GET and no tricks. However, I receive this error:</p>
  
  <blockquote>
    <p>XMLHttpRequest cannot load <a href="https://xxx-xxxx-xx.herokuapp.com/api/foods/" rel="nofollow noreferrer">https://xxx-xxxx-xx.herokuapp.com/api/foods/</a>. No 'Access-Control-Allow-Origin' header is present on the requested resource. Origin '<a href="http://localhost" rel="nofollow noreferrer">http://localhost</a>' is therefore not allowed access.</p>
  </blockquote>
  
  <p>Which is normal for Chrome. However, I wanted to do this the way Postman handles it. How should I make the request to the api so that it allows everything? </p>
  
  <p>I used this Chrome extension and it worked. </p>
  
  <p><a href="https://github.com/vitvad/Access-Control-Allow-Origin/" rel="nofollow noreferrer">https://github.com/vitvad/Access-Control-Allow-Origin/</a></p>
  
  <p>What I was able to figure out that it is basically setting this rule:</p>
  
  <pre><code>    rule = {
          "name": "Access-Control-Allow-Origin",
          "value": "*"
      };
  </code></pre>
  
  <p>However, when I try to set it using xhr.setRequestHeader() method, it doesn't work.</p>
  
  <pre><code>&lt;script&gt;
      var xhr = new XMLHttpRequest();
      xhr.open('GET', 'https://xxx-xxxx-xx.herokuapp.com/api/foods/', true);
      xhr.setRequestHeader("Content-Type", "application/x-www-form-urlencoded");
      xhr.onload = function(){
        console.log(xhr)
      }
      xhr.send(null);
  &lt;/script&gt;
  </code></pre>