javascript - 无法使用 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"));

我的问题是，当我在浏览器地址栏中键入请求时，我得到了正确的响应 - 状态不可用。 (我也使用 postman 得到了正确的响应，但我相信这是因为 CORS 不适用于 postman )

我尝试添加 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 header 。

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

首先，关于使用 JSONP，它仅支持 GET 请求，并且旧浏览器和旧版本的 jquery 也可能不支持。更好的选择是使用常规 ajax 请求，它支持所有 http 请求方法。 配置 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();
            }
        }

接下来，在 Controller 类开始之前添加 EnableCors 属性，如下所示:

using System.Web.Http.Cors;

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

您还可以在各个操作 Controller 上使用此属性。参数可以根据您的要求进行更改。我的代码支持来自任何 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 header ，从而导致浏览器出现问题。我认为您应该设置 webConfig 文件或 WebApiConfig.cs 文件，仅设置一个。 就这样，我不需要更改 webApiConfig。

为了完整起见，这里是我的服务中的示例操作 Controller 方法，它返回 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
    });