JQuery $ .get returns 404 undefined from Self Host Web API

Question

I am just starting to look at web-api and creating small projects for self-hosting. I installed the base controller and it returned the results when I tried to point to it in my browser.

Now when I try to call it using jquery.get

eg,

$.get("http://<my ip>:8082/api/stats/single/1/i") .done(function(result) { alert("results"); }) .error(function(result) { alert(result.status + " " + result.responseText); } );}; 

I get an error (404 undefined)

If I look at the result above, I see the expected json results, and the original header looks like this.

  HTTP/1.1 200 OK Content-Length: 415 Content-Type: application/json; charset=utf-8 Server: Microsoft-HTTPAPI/2.0 Date: Tue, 18 Jun 2013 13:04:03 GMT 

If I try jquery on another remote server that I know provides test data, .get will return correctly. I notice that there is much more to the original header from this server ...

  HTTP/1.1 200 OK Cache-Control: no-cache Pragma: no-cache Content-Length: 431 Content-Type: application/json; charset=utf-8 Content-Encoding: gzip Expires: -1 Vary: Accept-Encoding Server: Microsoft-IIS/8.0 Set-Cookie: ARRAffinity=462716b27beb795c09df205e893d3e263b1ec9b710c92f7c4203f4b63ac1aed2;Path=/;Domain=sampleservices.devexpress.com Set-Cookie: ASP.NET_SessionId=j4sdehjie1h0cv2rukxnudw3; path=/; HttpOnly Access-Control-Allow-Origin: null Access-Control-Allow-Credentials: true X-AspNet-Version: 4.0.30319 X-Powered-By: ASP.NET X-Powered-By: ARR/2.5 X-Powered-By: ASP.NET Set-Cookie: WAWebSiteSID=14a8502027ea4cc3a9e65036ed421c5e; Path=/; HttpOnly Date: Tue, 18 Jun 2013 13:26:52 GMT 

Does anyone have any idea why my web-api test doesn't work with a call using $ .get ??

(answer to the question) ..

When I use my request in chrome, I get

HTTP / 1.1 200 OK Content-length: 405 Content-Type: application / xml; encoding = UTF-8 Server: Microsoft-HTTPAPI / 2.0 Date: Wed, 19 Jun 2013 05:34:33 GMT

< ArrayOfStateController.State xmlns:i="http://www.w3.org/2001/XMLSchema-instance" xmlns="http://schemas.datacontract.org/2004/07/WebApiEquipmentStatus"><StateController.State><Description>state1 description</Description><Name>state1</Name></StateController.State><StateController.State><Description>state2 description</Description><Name>state2</Name></StateController.State></ArrayOfStateController.State>

And when I run jquery, I see the following in fiddler

 HTTP/1.1 200 OK Content-Length: 107 Content-Type: application/json; charset=utf-8 Server: Microsoft-HTTPAPI/2.0 Date: Wed, 19 Jun 2013 05:35:58 GMT [{"Name":"state1","Description":"state1 description"},{"Name":"state2","Description":"state2 description"}] 

[EDIT]

From the suggestions I tried below.

  enter code here enter code here $.ajax.crossDomain = true; getSingle = function () { $.getJSON("http://<ip>/api/state/single/1/i?callback=process", {header: 'Access-Control-Allow-Origin: *'}) .done(function (result) { var process = function(data) { $("#results").text(data.toString()); }; }) .error(function (result) { $("#results").text(result.status + " " + result.responseText); }); }; 

If I look in the Chrome console window, I still see

 "XMLHttpRequest cannot load http://<ip>:8082/api/state/single/1/i?callback=process. Origin null is not allowed by Access-Control-Allow-Origin. " 

I spent all day on googling and nothing seems to indicate how to solve this (intro level)

Answer 1

Hi, finally got this job.

Being new to web-api, all I wanted to know was how to set this header information, and all I needed to do, and not just return the results, was to wrap it in an HttpResponseMessage and return it , eg

 const string AccessControlAllowOrigin = "Access-Control-Allow-Origin"; public HttpResponseMessage GetAllProducts() { var results = GetProducts(); HttpResponseMessage response = Request.CreateResponse(HttpStatusCode.OK, results); response.Headers.Add(AccessControlAllowOrigin, "*"); return response; } 

Thanks for your contributions anyway.

Answer 2

As Bart said, you might “face the same challenge of the origin policy when you call,” perhaps because you are using port 8082 in your ajax request and not in the original URL. You can:

• do not use this port
• use jsonp
• use the header "Access-Control-Allow-Origin:" with " http://<my ip>:8082 " on the start page And use the $ .ajax () parameter "crossDomain" set to true.