title: XMLHttpRequest.send() causes Access-Control-Allow-Origin error
body: <p>I'm trying to make an API call to a third party service, with the following JS:</p>
  
  <pre><code>&lt;script&gt;
  var xhr = new XMLHttpRequest();
  xhr.open("GET", "https://api.something.com/apikeyetcetc", false);
  xhr.send();
  
  console.log(xhr.status);
  &lt;/script&gt;
  </code></pre>
  
  <p>However, at the xhr.send() line, it triggers this error in the browser's console:</p>
  
  <blockquote>
    <p>XMLHttpRequest cannot load <a href="https://api.something.com/apikeyetcetc" rel="nofollow">https://api.something.com/apikeyetcetc</a>. No
    'Access-Control-Allow-Origin' header is present on the requested
    resource. Origin '<a href="http://localhost:8888" rel="nofollow">http://localhost:8888</a>' is therefore not allowed
    access.</p>
  </blockquote>
  
  <p>I'm running a local server using MAMP from www.mamp.info on a fresh install of macOS Sierra.</p>
  
  <p>I created a .htaccess file in the same directory as the HTML file I've created, and added the following line:</p>
  
  <pre><code>Header set Access-Control-Allow-Origin "*"
  </code></pre>
  
  <p>But it doesn't seem to have helped. I see a lot of varying suggestions about CORS on Apache and other configurations, but I want to make sure I know what's going on here before randomly trying things (especially while I still have a clean dev environment). Any thoughts what might be going on?</p>
  
  <p>Edit: The API I'm trying to use is Dark Sky.</p>