jQuery的Ajax调用跨域返回404状态，即使我能看到的JSON有效载荷返回 [英] jQuery ajax call to cross domain returns status 404 even though i can see JSON payload returned

问题描述

我已经花了当今大​​多数试图找出为什么我的jQuery ajax调用我的独立HTML页面跨域ASP.Net MVC的Web API调用返回正确的JSON数据，但我得到的在Ajax调用我的错误部分以下错误信息：

I've spent most of today trying to figure out why my jQuery ajax call in my stand-alone HTML page to a cross domain ASP.Net MVC Web API call is returning the proper JSON data, but I'm getting the following error message in my error portion of ajax call:

{对象的readyState = 4，状态= 404，状态文本=错误，更多...}

Object { readyState=4, status=404, statusText="error", more...}

我使用jQuery 2.0.3。这是我的ajax调用code：

I'm using jQuery 2.0.3. Here's my ajax call code:

    $.ajax
({
    type: "GET",
    beforeSend: function (xhr, settings)
    {
        xhr.setRequestHeader("Authorization", "95d11869-a2ad-4925-8a16-ee23c82909ac");
    },
    url: url,
    dataType: "json",
    processData: false,
    crossDomain: true,
    success: function (jsonFromServer)
    {
        alert(JSON.stringify(jsonFromServer));
    },
    error: function (xhr, textStatus, errorThrown)
    {
        if (typeof console === 'object' && typeof console.log === 'function')
        {
            console.log(xhr);
            console.log(textStatus);
            console.log(errorThrown);
        }
    }       
});

我可以确认是工作两种不同的方式调用我的Web API服务：通过提琴手，并通过在Firebug的网络流量选项卡。这两种方式显示2个不同的呼叫到我的服务器：preflight和实际要求。菲德勒显示实际的JSON数据结果和我对JSLint的验证，他们和JSON格式正确无误。网络流量选项卡的第二个项目，以我的服务表示200的状态，但反应是空的。

I can validate the call to my WEB API service is working 2 different ways: via Fiddler and via network traffic tab in firebug. Both ways show 2 different calls to my server: preflight and actual request. Fiddler shows the actual JSON data results and I've validated them against JSLint and the JSON is formatted correctly. The network traffic tab's second entry to my service indicates a 200 status but the response is empty.

下面是我的请求头：

GET /api/gamelist HTTP/1.1
Host: local.XXXXXX.com
User-Agent: Mozilla/5.0 (Windows NT 6.2; WOW64; rv:24.0) Gecko/20100101 Firefox/24.0
Accept: application/json, text/javascript, */*; q=0.01
Accept-Language: en-US,en;q=0.5
Accept-Encoding: gzip, deflate
Authorization: 95d11869-a2ad-4925-8a16-ee23c82909ac
Referer: http://127.0.0.1:52148/index.html
Origin: http://127.0.0.1:52148
Connection: keep-alive

下面是我的响应头：

HTTP/1.1 200 OK
Cache-Control: no-cache, no-store
Pragma: no-cache
Content-Type: application/json; charset=utf-8
Expires: -1
Server: Microsoft-IIS/8.0
Access-Control-Allow-Origin: *
Access-Control-Allow-Origin: http://127.0.0.1:52148
X-AspNet-Version: 4.0.30319
Access-Control-Allow-Origin: *
Access-Control-Allow-Methods: POST, PUT, GET, DELETE, OPTIONS
Access-Control-Allow-Credentials: true
Access-Control-Allow-Headers: Content-Type, Authorization, X-Requested-With
Access-Control-Max-Age: 86400
Date: Fri, 04 Oct 2013 20:22:43 GMT
Content-Length: 683

我已经通过很多帖子的阅读和看到的例子，人们说的作品。我不知道我在做什么错。没有人有任何见解吗？

I've read through a lot of posts and see examples that people say works. I'm not sure what I'm doing wrong. Does anyone have any insight please?

更新

我打开Firefox的WebDeveloper网络工具来监视请求的传输。我注意到它的报告，以下为合同研究组织域呼叫到我的服务器：

I turned on Firefox's WebDeveloper Network tool to monitor transmissions of requests. I noticed it's reporting the following for the cros domain call to my server:

语法错误：JSON.parse：数据意外结束

Syntax Error: JSON.parse:unexpected end of data.

下面是我通过小提琴手获得从我的服务调用返回的JSON数据：

Here's the JSON data returned from my service call I obtained via fiddler:

{"Player":{"PersonId":33,"PersonName":"Anonymous User","UserKey":"95D11869-A2AD-4925-8A16-EE23C82909AC","EmailAddress":"unknown"},"GameList":[{"GameId":17,"QuestionTypeId":1,"QuestionTypeName":"Baseball","QuestionId":6,"QuestionName":"Basbeball Team Names","GameTypeId":2,"GameTypeName":"Solo","TotalAvailablePoints":141,"StartDate":"2013-10-04T11:17:10.277","WhosTurnIsItId":33,"WhosTurnName":"Anonymous User"},{"GameId":18,"QuestionTypeId":1,"QuestionTypeName":"Baseball","QuestionId":3,"QuestionName":"World Series Winners","GameTypeId":2,"GameTypeName":"Solo","TotalAvailablePoints":149,"StartDate":"2013-10-04T11:17:10.277","WhosTurnIsItId":33,"WhosTurnName":"Anonymous User"}]}

我贴这个JSON在JSLint的，它说，它的格式正确无误。我不知道这是怎么回事。任何见解？

I've pasted this JSON in JSLint and it says it's formatted correctly. I'm not sure what's going on. Any insight?

推荐答案

我不得不就此问题，以及和解决它，如下所示：

I had this very issue as well and solved it as follows:

• 更改从JSON的数据类型设置为JSONP在AJAX调用
• 在添加此的NuGet包到Web API项目： WebApiContrib.Formatting.Jsonp

• 注册 JsonpFormatter 通过调用这个的Global.asax ：

• Change the dataType from 'json' to 'jsonp' in the AJAX call
• Add this NuGet package to the Web API project: WebApiContrib.Formatting.Jsonp

• Register the JsonpFormatter by calling this from Global.asax:

configuration.Formatters.Insert(0, new JsonpMediaTypeFormatter(configuration.Formatters.JsonFormatter));

问题是Web API不知道怎么说话JSONP，这是一个可以在跨域AJAX调用中使用的唯一的数据类型。

The issue is that the Web API doesn't know how to speak jsonp, which is the only dataType that can be used in cross-domain AJAX calls.

这篇关于jQuery的Ajax调用跨域返回404状态，即使我能看到的JSON有效载荷返回的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！