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

Posted 2023-03-03

【中文标题】无法使用 jquery 从 Web API 获取 JSON 响应

【英文标题】：Cannnot get JSONP response from WebAPI using jquery

【发布时间】：2017-12-20 05:13:17

【问题描述】：

我正在开发一个 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 添加响应正文？如果是这样怎么办？请帮忙。

【问题讨论】：

你试过了吗：***.com/questions/9421312/jsonp-with-asp-net-web-api？请注意 jsonp 和 cors 是两个不同的概念：***.com/questions/12296910/so-jsonp-or-cors

【参考方案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
    );

【参考方案2】：

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

Access-Control-Allow-Origin: *

【讨论】：

你能解释一下在哪里添加标题吗？

从 [this docs][1] 看来有不少步骤 [1]：docs.microsoft.com/en-us/aspnet/web-api/overview/security/…