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

【问题标题】：jQuery ajax call to WebApi works on IE but not Firefox, Chrome or Opera对 WebApi 的 jQuery ajax 调用适用于 IE，但不适用于 Firefox、Chrome 或 Opera
【发布时间】：2013-06-11 08:25:44
【问题描述】：

我有一个测试网页，用于调用 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 返回成功消息，但对于其他三个浏览器，我在显示的错误函数中收到三个警报。唯一要设置的参数是textStatus，设置为'error'

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

有没有人知道这可能是什么问题，以及如何让它在所有浏览器中工作？

【问题讨论】：

可能是跨域问题，您从哪个 url 向 api 发出请求？
我调用 jQuery 的测试网页位于http://localhost:65513/Home.html。
那么它的来源不同。尝试数据类型：“json”

标签： jquery ajax asp.net-web-api

【解决方案1】：

您很可能正在经历same origin policy 的影响。简而言之 - 不可能在不同站点之间进行 ajax 调用（这里的站点定义为方案、主机名和端口号的组合 - 后者在您的情况下是不同的）。

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

【讨论】：

【解决方案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 返回数据时，这篇文章仍然具有相关性。

【讨论】：

【解决方案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;
    }

【讨论】：