Question

我有一个测试网页，用于调用WebApi URL并获得回复。它在IE中可以正常工作，但没有其他浏览器。

这是我制作的jQuery调用

$(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);
            }
        })
    })
});

以下是代金券控制器中的代码

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

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

IE返回Success消息，但对于其他三个浏览器，我在显示的错误函数中得到三个警报。唯一要设置的参数是textStatus，设置为'error'

当我在Firefox和Chrome上直接浏览网址（http://localhost:64804/api/Voucher/5）时，它会在浏览器窗口中显示"{\"test\":5}"。 IE要求我下载一个名为5.json的文件，Opera要求我下载一个名为5的文件。这两个文件只包含上面显示的文本，显示在Firefox和Chrome的窗口中

有没有人知道这里的问题是什么，以及如何让它在所有浏览器中运行？

Answer 1

您很可能会遇到same origin policy的影响。简而言之 - 不可能在不同站点之间进行ajax调用（这里的站点被定义为scheme，hostname和port number的组合 - 后者在你的情况下是不同的。）

要解决此问题，您可以使用JSONP技术。这是一个SO thread，描述了如何将JSONP与WebAPI结合使用。

Answer 2

据猜测，Web API正在以不同的方式序列化结果，因为您没有按照预期的方式使用Web API。

理想情况下，您应该返回对象。

试试这个：

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.
}

所以，理想情况下，这个：

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

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

    return testing;
}

**编辑**

正如其他人所说，查看您的端口，这将是一个跨域问题。使用JSONP解决这个问题。但是，当从WebAPI返回数据时，这篇文章仍然具有相关性。

Answer 3

我得到了Chris Dixon，Andrei和soderslatt的答案的组合

我遇到错误的主要原因是Ajax调用中的数据类型被设置为'json'而不是'jsonp'。

我改变了这个，然后在WebApi端安装了nu-get包WebApiContrib.Formatting.Jsonp，并按照这里的说明进行操作：https://github.com/WebApiContrib/WebApiContrib.Formatting.Jsonp

我还更新了我的控制器方法，以按照Chris Dixon的建议返回一个对象

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

jQuery ajax对WebApi的调用适用于IE，但不适用于Firefox，Chrome或Opera

3 个答案: