title: Access-Control-Allow-Origin from mobile devices
body: <p>We currently have an API running on a cluster of servers, with Apache. Every response from the API is JSON.</p>
  
  <p>I've been playing around with the <a href="http://ionicframework.com/" rel="noreferrer">http://ionicframework.com/</a> framework, which uses Angular JS as it's Javascript base. It's got to the point where I want to make requests from the web app I'm working on, with Angular:</p>
  
  <pre><code>$http.get('http://myapi.com/getData').success(function(data) {
      console.log(data);
  });
  </code></pre>
  
  <p>Now of course, I get the error:</p>
  
  <pre><code>XMLHttpRequest cannot load http://myapi.com/getData. No 'Access-Control-Allow-Origin' header is present on the requested resource. Origin 'http://localhost:8100' is therefore not allowed access.
  </code></pre>
  
  <p>Now this is obviously a CORS issue, and I understand why. One solution for this would be to set <code>Header set Access-Control-Allow-Origin "*"</code> on the servers, however opening up the entire API to any cross site request is surely risky?</p>
  
  <p>Instead, is there no way for me to set some form of key/security which the server checks against to make sure it's coming from the app I'm building.</p>
  
  <p>The angular $http docs have:</p>
  
  <pre><code>xsrfHeaderName – {string} – Name of HTTP header to populate with the XSRF token.
  xsrfCookieName – {string} – Name of cookie containing the XSRF token.
  </code></pre>
  
  <p>Where would I check for these on the server, and what is a secure way of doing this?</p>
  
  <p>JSONP is not an option, since the API can't be changed in it's current state.</p>