使用 jQuery Ajax 调用 ASP Web API 跨域

Question

我有一个 ASP Web API 应用程序，它使用 Web 浏览器跨域运行良好。它以 JSON 格式返回所有预期数据，我可以在 Firefox 和 Fiddler 中清楚地看到这些数据。例如，使用 Firefox：

http://mywebapidomain.com/api/drink/

返回：

<ArrayOfDrink>
    <Drink>
        <AlcoholContent>0.05</AlcoholContent>
        <Id>1</Id>
        <Name>12 oz beer</Name>
        <OuncesPerDrink>12</OuncesPerDrink>
    </Drink>
    <Drink>
        <AlcoholContent>0.12</AlcoholContent>
        <Id>2</Id>
        <Name>Glass wine</Name>
        <OuncesPerDrink>5</OuncesPerDrink>
    </Drink>
</ArrayOfDrink>

我可以使用 Fiddler 看到类似的成功。到目前为止，我有一个驻留在 Web API 域上的页面，并使用 jQuery 进行调用，如下所示：

// AJAX Call - Get Drink Types
function getDrinkTypes() {

    return $.ajax({
        type: "GET",
        contentType: "application/json; charset=utf-8",
        url: "http://mywebapidomain.com/api/drink/",
        dataType: "json",

        success: function (data) {
            DrinkTypeList = data;
        },

        error: function (xhr, status, error) {
            alert(xhr.statusText + " - " + xhr.status + "\n\n" + xhr.responseText);
        }
    });
}

同样，这工作正常并返回了所有预期的数据。

这里没有涉及其他问题，我有充分的理由将上述 jQuery 代码放在一个完全不同的服务器/域上的脚本中。现在 Ajax 调用失败了。在检查 xhr、status 和 error 后，我看到以下内容：

xhr.readyState = 4
xhr.status = 404
xhr.statusMessage = "undefined"

status = "error"

error = ""

使用 Fiddler 查看，我看到了原始请求：

OPTIONS http://mywebapidomain.com/api/drink/ HTTP/1.1
Accept: */*
Origin: http://localhost:65103
Access-Control-Request-Method: GET
Access-Control-Request-Headers: content-type, accept
Accept-Encoding: gzip, deflate
User-Agent: Mozilla/5.0 (compatible; MSIE 10.0; Windows NT 6.2; WOW64; Trident/6.0; Touch)
Host: mywebapidomain.com
Content-Length: 0
DNT: 1
Connection: Keep-Alive
Pragma: no-cache

回应：

HTTP/1.1 200 OK
Cache-Control: no-cache
Pragma: no-cache
Expires: -1
Server: Microsoft-IIS/8.0
X-AspNet-Version: 4.0.30319
X-Powered-By: ASP.NET
Date: Thu, 23 Jan 2014 08:48:57 GMT
Content-Length: 0

我没有在 ASP/MVC4 Web API 域上配置 CORS 或 JSONP 支持。

在这个项目的早期，我遇到了这个问题并做了一些研究。我读到 jQuery Ajax 进行了 Web 浏览器没有的初始调用。我完全忘记了这叫什么，但上面来自 Fiddler 的原始请求标头中的 OPTIONS 很明显。由于我不理解它，我选择在同一个域上运行客户端 jQuery，并将其包含在备用域上的 iframe 中。这有其自身的复杂性，所以我回来解决这个问题。

有很多与这个问题相关的文章，但我一直无法理解它们。我只是不知道如何处理这个。 :S

当我一直在输入这个问题时，我看到许多类似的问题已经被问过。我已经在一个单独的窗口中打开它们并阅读了每一个，但它们似乎都没有帮助我理解我必须做什么......

有人能具体指出如何解决这个跨域 jQuery Ajax 问题吗？

Answer 1

我认为你必须启用跨站点伪造请求，你有很多选项可以做到这一点 在您的回复中添加适当的标题 看看这些链接 adding header to response>

using attributes>