无法使用 jquery 从 Web API 获取 JSON 响应

Question

我正在开发一个 C# MVC Web 应用程序，它将跨域请求发送到 Web API REST 服务。但是我不断收到错误。我的jquery代码如下：

$.ajax({
            url: RESTurl,
            type: 'GET',
            dataType: 'jsonp',
            jsonp: 'callback',
            jsonpCallback: 'myCallback'
        });

        window.myCallback = function (data) {
            console.log(data);
        };

处理我的请求的 webAPI 代码是这样的：

[HttpPost, HttpGet]
        public String checkStatus(string passedId)
        {
           //some other code
           return "Status Unavailable";
        }

我的 webApiConfig 文件如下：

 config.Routes.MapHttpRoute(
                name: "DefaultApi",
                routeTemplate: "api/{controller}/{action}/{passedId}",
                defaults: new { passedId = RouteParameter.Optional }
            );
        config.Formatters.JsonFormatter.SupportedMediaTypes
.Add(new MediaTypeHeaderValue("text/html"));

我的问题是，当我在浏览器地址栏中键入请求时，我得到了正确的响应-Status Unavailable。 （我也使用邮递员得到正确的响应，但我相信这是因为 CORS 不适用于邮递员）

我尝试添加crossDomain: 'true' 并将jquery 跨域插件添加到项目中，但没有帮助。

我也试过不带回调函数但没有得到结果。

还尝试将Microsoft.AspNet.WebApi.Cors添加到webApi项目然后添加

var cors = new EnableCorsAttribute("*", "*", "*");
config.EnableCors(cors);

到 webApiConfig.cs（如建议的here），但它也没有任何区别。如果 CORS 存在问题，我很惊讶直接从浏览器键入时会有响应。 我现在的反应是这样的：

http://xxxxx.com:xxxx/xerviceapi/api/xxx/checkstatus/3?callback=myCallback&_=1500087168776

这是一个屏幕截图：

如您所见，我的 jquery 版本是 1.10（有点旧），但我目前无法升级，因为其他模块依赖于它。这是一个原因吗？

即使我从浏览器收到响应，我是否还需要向 webAPI 添加响应正文？如果是这样怎么办？请帮忙。

Answer 1

经过大量试验和错误，感谢 @Khanh TO 和 @Hugo Sama 的有用建议，我发现问题在于 webAPI 未正确配置以添加 CORS 标头。

还需要注意的是，JSONP是一个完全不同的概念，是一种绕过浏览器CORS限制的方式。

首先，关于使用JSONP，它只支持GETrequests，也可能不支持旧浏览器和旧版本的jquery。更好的选择是使用支持所有 http 请求方法的常规 ajax 请求。 配置 webAPI 以响应 CORS 请求非常简单，但可能看起来很棘手。

我将给出我遵循的步骤。 This link 很有帮助。

首先需要安装包Install-Package

Microsoft.AspNet.WebApi.Cors

来自包管理器控制台或 nuget 包管理器。之后在App_Start/WebApiConfig.cs中，我添加了一个Application_BeginStart方法如下：

protected void Application_BeginRequest()
        {
            if (Request.Headers.AllKeys.Contains("Origin") && Request.HttpMethod == "OPTIONS")
            {
                Response.Flush();
                Response.End();
            }
        }

接下来，在控制器类的开始之前添加 EnableCors 属性，如下所示：

using System.Web.Http.Cors;

namespace xxxAPI.Controllers
{
    [EnableCors(origins: "*", headers: "*", methods: "*")]
    public class xxxxController : ApiController
    { //.. blah blah blah

您也可以在单个动作控制器上使用此属性。可以根据您的要求更改参数。我的代码支持来自任何 URL、任何方法的 CORS 请求。请查看上述链接以获取更多信息。

最后你需要在<system.webServer>下的webconfig文件中添加以下几行。

<httpProtocol>
      <customHeaders>
        <add name="Access-Control-Allow-Origin" value="*" />
        <add name="Access-Control-Allow-Methods" value="*" />
        <add name="Access-Control-Allow-Headers" value="*"/>
      </customHeaders>
    </httpProtocol>

一些来源还要求您添加：

 config.enableCors();

在WebApiConfig.cs 中，但这会导致 webApi 发回多个 CORS 标头，从而导致浏览器出现问题。我相信您应该设置 webConfig 文件或 WebApiConfig.cs 文件，只需一个。 就是这样，不需要为我更改 webApiConfig。

为了完整起见，这是我的服务中的示例操作控制器方法，它返回 httpResponseMessage。

 [HttpPost, HttpGet]
        public HttpResponseMessage stopxxxxx(string passedId)
        {
        string returnedValue = "Error Stopping xxxxx";

        return new HttpResponseMessage(HttpStatusCode.OK)
        {
            Content = new StringContent(returnedValue, System.Text.Encoding.UTF8, "text/plain")
        };
    }

这是我在 jquery 中提出的请求（如您所见，这是一个普通的普通 ajax 查询）：

 $.ajax({
        type: 'GET',
        url: RESTurl,
    }).done(function (data) {
        //alert(data);
    }).error(function (jqXHR, textStatus, errorThrown) {
        //handle error
    });

Answer 2

您的问题可能与 CORS 有关，请尝试将此标头添加到您的 webAPI：

Access-Control-Allow-Origin: *