Ajax GET request to a WebAPI hosted on a separate server, getting error

Question

This is my first time working with an Ajax request from client-side code, so I hope there's some obvious error that I'm just not seeing in my code. Let me preface this by saying when I manually navigate to the URL listed below, I get a JSON response. So, the URL is good. But, when I make the Ajax GET request, I end up with the error:

enter image description here

Here's my client side code:

    $.ajax({
        url: 'http://localhost/TestApp.WebAPI/api/BulletinBoard/APPNAME',
        type: 'GET',
        dataType: 'json',
        crossDomain: true,
        success: function (data) {
            WriteResponse(data);
        },
        error: function (x, y, z) {
            alert(x + '\n' + y + '\n' + z);
        }
    });

So, the code is hitting the error but I'm not sure why. I'm not an expert with JavaScript so I'm not sure if there's anything I can do to get a more detailed version of the error, but I hope that there's something obvious that I'm missing.

score 1 · Answer 1 · edited May 23 '17 at 11:50

More reading here: jQuery AJAX cross domain

I know I was working on a project where the api was on a separate web service, however, developing locally.. with both sites under iis as a separate application it worked since the urls were similar to the following: http://localhost/mysite/ and http://localhost/mysiteAPI/ maybe your initial project was setup like this? I do remember adding the accept information mentioned in the article above. I also remember attaching "&callback=?" to the url of some of my calls to simulate jsonp without having to specify the type.

score 1 · Answer 2 · edited Dec 26 '13 at 20:28

Ajax doesn't help always. On IE 7,8 you still can't do CORS using that technique. It's possible to do cross domain request with ajax but in certain cases like what I said (IE 7,8) you need to do a "hack" to be able to "inject" the response into the request page. That technique is sometimes referred as JSONP(or JSON padding). On Chrome and Firefox, you can do CORS even without the setting set to true provided the response service allow cross domain calls, on IE 10 (i believe) and 11 that is possible too.

score 0 · Answer 3 · edited May 23 '17 at 11:56

0

You are doing cross domain requests which is not possible using normal AJAX requests, you must use JSONP requests. I answered this for another person not too long ago, look here: JQuery JSON Calls To PHP WebService Always Runs "Error" Callback

edited May 23 '17 at 11:56

Community

1
1

answered Dec 26 '13 at 15:00

T McKeown

12,312
1
21
30

Well, if I put `jQuery.support.cors = true;` in my JavaScript, I used to be able to get my data, but now, regardless of whether or not I have this in it or not, it's not working anymore. – Mike Marks Dec 26 '13 at 15:02
It used to return a success when I had the above line in. – Mike Marks Dec 26 '13 at 15:02
if it was cross domain and the results coming back from the server were not jsonp like then i doubt it was really working.... trust me, you CANNOT do cross domain with ajax without jsonp. – T McKeown Dec 26 '13 at 15:10
Yep, my WebAPI was returning plain JSON (I didn't have the JSONP provider installed), and my client side code, as you can see, has data type of "json" and not "jsonp", and I was actually getting 3 records from my database via the WebAPI call from Ajax which output an HTML table in the WriteResponse(data) method, on my page. Weird, huh. But that was only when I enabled CORS on the JQuery side. – Mike Marks Dec 26 '13 at 15:35
returning json is not actually what I mean... not going to try and convince you... good luck. – T McKeown Dec 26 '13 at 15:37
Okay, I'm not asking you to convince me, I'm just trying to understand what you mean, because from my perspective, I was doing what you said was impossible. Anyways, take care. Thanks for the input. – Mike Marks Dec 26 '13 at 15:44
I think I'm going to go the JSONP route instead, seems a bit easier :) – Mike Marks Dec 26 '13 at 15:46
cross domain is not allowed at the browser level, unless it's for resources like javascript or css... that is what jsonp emulates.... look it up, cross domain IS NOT SUPPORTED PERIOD.... learn how to correctly implement jsonp and it will work. I argue with people on this and EVERYTIME they realize that what I am saying is correct. Like I said, read up on it and forget if you "thought" you had cross domain calls working with regular ajax/json. – T McKeown Dec 26 '13 at 15:48
Let me ask you - `http://localhost/WebAPI` vs. `http://localhost:58886/ClientSite` - would these two be considered cross domain? If NOT, then that explains why I was getting data via my Ajax call. – Mike Marks Dec 26 '13 at 15:52
Exactly as I said above - `http://localhost/WebAPI` was the WebAPI hosted on my local IIS, and `http://localhost:58886/ClientSite` was the site that was making the AJAX call to the WebAPI. I would imagine these two would actually be considered the same domain, no? – Mike Marks Dec 26 '13 at 15:56
no, they are different because they are not exactly the same. domain for one is http://localhost (implied port 80) the other is http://localhost:58886, that is entirely a different domain – T McKeown Dec 26 '13 at 16:00
would love the credit for this Q... if you don't mind =) lol – T McKeown Dec 26 '13 at 16:07
I feel I need to eliminate any possibility of error on my side, because, and I'm telling you, I'm not smoking crack or anything, I was getting data in my Ajax JSON request which was cross-domain (URL's above). I need to find out why I was (caching maybe..????) before I give credit on the Q. I really appreciate your passion on this topic, and thank you for the input. – Mike Marks Dec 26 '13 at 16:45
ok, don't spend too much time on getting cross domain to work though, because it wont. ;) – T McKeown Dec 26 '13 at 16:49
T McKeown, look at my answer down below. I found a way to return JSON via an AJAX call, cross domain, if using Web API 2. – Mike Marks Dec 30 '13 at 14:47

Mike Marks · Accepted Answer · 2014-01-08T22:09:36.417

0

If you're using WebAPI 2, you can simply add a reference via Nuget to System.Web.Http.Cors (search for Microsoft.AspNet.WebApi.Cors in Nuget). Then, in your controller, add:

using System.Web.Http.Cors;

As well as:

[EnableCors("*", "*", "*")] above the method you are calling from another domain.

Finally, add:

using System.Web.Http.Cors; to your WebApiConfig.cs, as well as:

config.EnableCors(); in your Register method in your WebApiConfig.cs.

This will now allow you to make cross domain calls from Ajax without using JSONP.

edited Jan 08 '14 at 22:09

answered Dec 30 '13 at 14:46

Mike Marks

9,463
15
61
120

1

Whoever downvoted this, it's very frustrating when you don't leave a comment explaining why. This IS a solution to my problem. – Mike Marks Jan 09 '14 at 14:45

Ajax GET request to a WebAPI hosted on a separate server, getting error

4 Answers4