jQuery ajax call to WebApi works on IE but not Firefox, Chrome or Opera

Question

I have a test web page for calling a WebApi URL and getting a reply. It works as expected in IE, but none of the other browsers.

Here is the jQuery call I make

$(document).ready(function()
{
    jQuery("#cmdCallServiceWithParameter").on("click", function(event)
    {

        $.ajax({
            type: "GET",
            url: "http://localhost:64804/api/Voucher/5",
            contentType: "application/json; charset=utf-8",
            dataType: "json",
            success: function ()
            {
                alert("success");
            },
            error: function (jqXHR, textStatus, errorThrown)
            { // Debug the error!!
                alert("error " + textStatus);
                alert("error throw " + errorThrown);
                alert("incoming Text " + jqXHR.responseText);
            }
        })
    })
});

Here is the code in the voucher controller

    // GET api/voucher/5
    public string Get(int id)
    {

        //return JsonConvert.SerializeObject(id, typeof(int), Formatting.Indented, new JsonSerializerSettings());
        return "{\"test\":" + id.ToString() + "}";
    }

IE returns a Success message, but for the other three browsers I get the three alerts in the error function displayed. The only parameter to be set is the textStatus, which is set to 'error'

When I browse to the URL directly (http://localhost:64804/api/Voucher/5) on Firefox and Chrome it shows "{\"test\":5}" in the browser window. IE asks me to download a file named 5.json, and Opera asks me to download a file named 5. Both files just contain the text shown above that appears in the window for Firefox and Chrome

Does anybody have any ideas what the issue could be here, and how I can get it to work in all browsers?

Could be a cross-origin issue, from what url do you make the request to the api ? — anderssonola, Jun 11 '13 at 08:41
the test web page I have that calls the jQuery is at `http://localhost:65513/Home.html`. — Neil, Jun 11 '13 at 08:43

score 2 · Accepted Answer · edited May 23 '17 at 10:25

2

Most likely you are experiencing effect of same origin policy. In short - it is impossible to make ajax calls between different sites (site here is defined as combination of scheme, hostname, and port number - the latter is different in your case).

To resolve this you can use a technique JSONP. Here is a SO thread describing how one can use JSONP with WebAPI.

edited May 23 '17 at 10:25

Community

1
1

answered Jun 11 '13 at 08:53

Andrei

55,890
9
87
108

Chris Dixon · Answer 2 · 2013-06-11T08:56:09.283

At a guess, it's the Web API that's serializing the results differently as you're not using Web API in the way it was intended to be used.

Ideally you should be returning objects back.

Try this:

public object Get(int id)
{
    return new { test = id.ToString(); } 
    // Creates a new anonymous object, rather than a string, but this should,
    // practically, be an object such as "TestObject" or whatever.
}

So, ideally, this:

public TestObject() 
{
    public int id { get; set; }
}

public TestObject Get(int id)
{
    TestObject testing = new TestObject { id = id };

    return testing;
}

** Edit **

Looking at your ports, as others have said, it'll be a cross-domain issue. Use JSONP to get around this. However, this post is still relevant when moving forward with returning data from the WebAPI.

score 0 · Answer 3 · answered Jun 11 '13 at 09:34

I've got it working with a combination of the answers from Chris Dixon, Andrei and soderslatt

The main reason I am was getting an error was the datatype in the Ajax call being set to 'json' instead of 'jsonp'.

I changed this, then installed nu-get package WebApiContrib.Formatting.Jsonp on the WebApi side and followed the instructions here: https://github.com/WebApiContrib/WebApiContrib.Formatting.Jsonp

I also updated my controller method to return an object as suggested by Chris Dixon

    // GET api/voucher/5
    public Voucher Get(int id)
    {
        Voucher voucher = new Voucher();
        voucher.VoucherNumber = id;
        return voucher;
    }

jQuery ajax call to WebApi works on IE but not Firefox, Chrome or Opera

3 Answers3