调用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来做样本

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

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

  

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

Answer 2

问题，如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);
    }
});