CODEWITHSUNDEEP
javascriptjqueryajaxasp.net-web-api
Mike Marks
Mike Marks

Reputation: 10139

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

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.

Upvotes: 0

Views: 1158

Answers (4)

T McKeown
T McKeown

Reputation: 12847

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

Upvotes: 0

Mike Marks
Mike Marks

Reputation: 10139

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.

Upvotes: 0

Sergio A.
Sergio A.

Reputation: 401

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.

Upvotes: 1

Paul Reedy
Paul Reedy

Reputation: 480

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.

Upvotes: 1

Related Questions