title: Angular $http.get and jQuery $.getJSON error, but URL opens fine in own tab
body: <p>I'm stumped. I'm trying to make a simple customer lookup request by first name. Both <code>jQuery.ajax()</code> (from the console) and Angular's <code>$http.get()</code> error out, but I don't know why. When I open in another tab the same URL given to those functions, it displays the expected JSON response.</p>
  
  <p><strong>jQuery</strong></p>
  
  <pre><code>$.ajax("http://[ip#]:8081/customerservice/customer/search?firstName=John", {
    "dataType": "json",
    "success": function() {
      alert("success");
      console.log("jQuery data", data);
    },
    "error": function(jqXHR, textStatus, errorThrown) {
      alert("error");
      console.log("jQuery jqXHR", jqXHR);
      console.log("jQuery textStatus", textStatus);
      console.log("jQuery errorThrown", errorThrown);
    },
    "complete": function(jqXHR, textStatus) {
      alert("complete");
      console.log("jQuery jqXHR", jqXHR);
      console.log("jQuery textStatus", textStatus);
    }
  });
  </code></pre>
  
  <p><em>result</em>: The error and complete alerts fire. <code>textStatus</code> is "error", <code>errorThrown</code> is an empty string, jqXHR contains</p>
  
  <pre><code>readyState    0
  responseText  ""
  status        0
  statusText    "error"
  </code></pre>
  
  <p><strong>Angular</strong></p>
  
  <pre><code>return $http.get('http://[ip#]:8081/customerservice/customer/search?firstName=John',
      {
          responseType: "json"
      }
  )
  .success(function(data, status, headers, config){
      alert("angular success");
  })
  .error(function(data, status, headers, config){
      alert("angular error");
      console.log(status);
      console.log(headers());
      console.log(config);
  })
  ;
  </code></pre>
  
  <p><em>result</em> I see a "200 OK" and response time in Firebug with the given URL. <em>status</em> is 404, <em>headers()</em> returns an empty object, and the config object is</p>
  
  <pre><code>headers           Object { Accept="application/json, text/plain, */*"}
  Accept            "application/json, text/plain, */*"
  method            "GET"
  responseType      "json"
  transformRequest  [function()]
      0
      function()
  transformResponse [function()]
      0
      function()
  url               "http://[ip#]:8081/customerservice/customer/search?firstName=John"
  </code></pre>
  
  <p>Firebug also shows</p>
  
  <pre><code>Response Headers
  Content-Type    application/json
  Date    Sat, 15 Feb 2014 05:13:02 GMT
  Server  Apache-Coyote/1.1
  Transfer-Encoding   chunked
  
  Request Headers
  Accept  application/json, text/plain, */*
  Accept-Encoding gzip, deflate
  Accept-Language en-US,en;q=0.5
  DNT 1
  Host    [ip#]:8081
  Origin  http://127.0.0.1
  Referer http://127.0.0.1/
  User-Agent  Mozilla/5.0 (X11; Linux x86_64; rv:24.0) Gecko/20100101 Firefox/24.0
  </code></pre>
  
  <p><em>other info</em> I'm running this in a VM, though I'm still able to access the Internet at large, and [ip#] directly. I'm new to Angular, which is why I tried it with jQuery.</p>
  
  <p>So, what's going on? I built this off the Angular UI Typeahead example, and it worked fine with the Google geocode URL. Is it because I'm using an IP# and/or port? Is it something glaring that I just don't see?</p>
  
  <p><strong>Update</strong>: The CORS headers have been added, and jQuery now works, but Angular is giving 404s. It seems the sent-by-default <code>X-Requested-With</code> header <a href="https://stackoverflow.com/a/16662590/356016">was a problem with CORS in 1.1</a>, but I'm using 1.2. </p>
  
  <p><strong>jQuery</strong></p>
  
  <pre><code>$.post(
      "http://[ip#]:8081/customerservice/customer/search",
      "firstName=John&amp;lastName=Smith",
      function (data, textStatus, jqXHR) {
        console.log("success!", data);
      }
  );
  </code></pre>
  
  <p><strong>Angular</strong></p>
  
  <pre><code>$http.post("http://[ip#]:8081/customerservice/customer/search",
          "firstName=John&amp;lastName=Smith"
      )
      .success(function(data, status, headers, config) {
          $scope.result = data;
      })
      .error(function(data, status, headers, config) {
          $scope.result = data || "Request failed";
          console.log("status: ", status);
          console.log("headers: ", headers());
          console.log("config: ", config);
      })
  ;
  </code></pre>