调用 WebAPI 时，请求的资源上不存在 Access-Control-Allow-Origin 标头

Question

我正在尝试调用我的 WebAPI，但我总是收到错误 No Access-Control-Allow-Origin header is present

在Using Cors的文章之后，我们有下面的代码，但它总是落在onerror方法

// Create the XHR object.
function createCORSRequest(method, url) {
    var xhr = new XMLHttpRequest();
    if ("withCredentials" in xhr) {
        // XHR for Chrome/Firefox/Opera/Safari.
        xhr.open(method, url, true);
    } else if (typeof XDomainRequest != "undefined") {
        // XDomainRequest for IE.
        xhr = new XDomainRequest();
        xhr.open(method, url);
    } else {
        // CORS not supported.
        xhr = null;
    }
    return xhr;
}

// Helper method to parse the title tag from the response.
function getTitle(text) {
    return text.match('<title>(.*)?</title>')[1];
}

// Make the actual CORS request.
function makeCorsRequest() {
    // All HTML5 Rocks properties support CORS.
    var url = 'http://localhost:56280/api/Meta/GetListMetas';    
    var xhr = createCORSRequest('GET', url);
    xhr.withCredentials = true;
    if (!xhr) {
        alert('CORS not supported');
        return;
    }

    // Response handlers.
    xhr.onload = function () {
        var text = xhr.responseText;
        var title = getTitle(text);
        alert('Response from CORS request to ' + url + ': ' + title);
    };

    xhr.onerror = function () {
        alert('Woops, there was an error making the request.');
    };

    xhr.send();
}

我也尝试了JSONP，但又没有成功，落在error 方法

    $.ajax({
        type: "GET",
        dataType: 'jsonp',
        url: "http://localhost:56280/api/Meta/GetListMetas"
    }).success(function (data) {
          alert(data)
    }).error(function (da) {
    });

WebAPI

我做了一个非常简单的 API 来做示例​​p>

WebApiConfig.cs

public static class WebApiConfig
{
    public static void Register(HttpConfiguration config)
    {
        // Web API configuration and services
        config.EnableCors();

        // Web API routes
        config.MapHttpAttributeRoutes();

        config.Routes.MapHttpRoute(
            name: "DefaultApi",
            routeTemplate: "api/{controller}/{id}",
            defaults: new { id = RouteParameter.Optional }
        );
    }
}

控制器

    [EnableCors(origins: "*", headers: "*", methods: "*")]
    public class MetaController : ApiController
    {
        public string GetListMetas()        
        {
           return "1";
        }
    }

我也尝试序列化返回，但没有成功。

有人可以帮助我吗？

更新

下面，我附上请求头

Answer 1

正如Vaughn Okerlund 提到的，问题出在客户端的请求中。
该请求被服务器阻止，因为它无法识别客户端的请求。

您可以enabled将客户端运行所在域的域列入白名单：

public static void Register(HttpConfiguration config)
{
    var corsAttr = new System.Web.Http.Cors.EnableCorsAttribute("http://localhost:7185", "*", "*");
    config.EnableCors(corsAttr);

    config.MapHttpAttributeRoutes();

    config.Routes.MapHttpRoute(
        name: "DefaultApi",
        routeTemplate: "api/{controller}/{id}",
        defaults: new { id = RouteParameter.Optional }
    );
}

如您所见，我已启用来自该域的每个动词的所有请求：

http://localhost:7185

如果你在那里配置你不需要的所有东西

[EnableCors(origins: "*", headers: "*", methods: "*")]

在您的控制器上。

考虑到您的客户端托管在 http://localhost:7185/ 中，您可以使用 jQuery 简单地使用以下语法调用服务器：

$.ajax({
    type: 'GET',
    url: 'http://localhost:56280/api/Meta/GetListMetas',
    data: {},
    dataType: "json",
    // crossDomain: true,
    success: function (result) {
        alert(result);
    },
    //complete: function (jqXHR, textStatus) {
    //},
    error: function (req, status, error) {
        alert(error);
    }
});

Answer 2

查看here，问题似乎在于，在控制器对服务请求的响应中，您发送的是源的通配符标头 (*)，而不是指定要允许的域。为了发送凭据请求，服务器必须授予对特定域的访问权限：

重要提示：在响应凭据请求时，服务器必须指定域，并且不能使用通配符。如果标头通配符为：Access-Control-Allow-Origin: *，上述示例将失败。由于 Access-Control-Allow-Origin 明确提及 http://foo.example，因此将凭证识别内容返回给调用 Web 内容。请注意，在第 22 行中，设置了另一个 cookie。