title: calling external api with AngularJS and ngResource
body: <p>we are currently developing a little AngularJS project and starting from the frontend, so pure HTML and JavaScript.</p>
  
  <p>However, we need to make some API calls using ngResource. At the moment we are using <a href="http://github.com/sideshowcoder/canned">canned</a> to mock the json return value.</p>
  
  <p>Say this returns a JSON:</p>
  
  <pre><code>GET http://ip-address/something/1.json
  </code></pre>
  
  <p>I want to be able to call this from ngResource:</p>
  
  <pre><code>app.controller('SomethingCtrl', function ($scope, $resource) {
    Something = $resource("http://ip-address/something/:id", {id: "@id"});
    $scope.something = Something.get({id:1});
  });
  </code></pre>
  
  <p>For some reason this does not work, although the endpoint is working correctly. Angular just makes an option request to this URL.</p>
  
  <p>Is this some kind of XSS protection magic and how do I solve it?</p>
  
  <p>Update: Added the IP-Address to example</p>
  
  <p>EDIT:</p>
  
  <p>I have changed the mock API server, so that CORS is allowed.</p>
  
  <p>I return now this header and the OPTIONS request goes through</p>
  
  <pre><code>Access-Control-Allow-Headers:X-Requested-With
  Access-Control-Allow-Max-Age:86400
  Access-Control-Allow-Methods:GET, POST, PUT, DELETE, HEAD, OPTIONS
  Access-Control-Allow-Origin:*
  </code></pre>
  
  <p>But now, the get request gets cancelled (no response gets returned). So I suppose Angular does some kind of magic.</p>