CORS在Web API中啟用，但訪問被拒絕

Question

我很確定在我的Web API項目中啟用了CORS，但拒絕訪問。 也許我錯誤配置了它？

錯誤：

從' http：// localhost：55817 '訪問來自' http：// localhost / ControlTower2WebAPI / api / PurchaseOrder / PagingCriticalPart '的XMLHttpRequest已被CORS策略阻止：對預檢請求的響應未通過訪問控制檢查：它沒有HTTP ok狀態。

Ajax調用：

<script type="text/javascript">
    $(document).ready(function () {
        var _tableId = 'tableCriticalParts';
        var _table = $('#' + _tableId).DataTable({
            "processing": true,
            "serverSide": true,
            "ajax": {
                url: 'http://localhost/ControlTower2WebAPI/api/PurchaseOrder/PagingCriticalPart',
                type: 'POST',
                contentType: "application/json",
                data: function (data) {
                    //debugger;
                    var model = {
                        draw: data.draw,
                        start: data.start,
                        length: data.length,
                        columns: data.columns,
                        search: data.search,
                        order: data.order
                    };
                    return JSON.stringify(model);
                },
                failure: function (result) {
                    debugger;
                    alert("Error occurred while trying to get data from server: " + result.sEcho);
                },
                error: function (XMLHttpRequest, textStatus, errorThrown) {
                    debugger;
                    alert("Error occurred while trying to get data from server!");
                }
                ,
                dataSrc: function (json) {
                    debugger;
                    for (key in json.Data) { json[key] = json.Data[key]; }
                    delete json['Data'];
                    return json.data;
                }
            }
            ,
            "columns": [
                { "data": "partNumber", title: "partNumber" },
                { "data": "partDescription", title: "partDescription" }
            ]
        });
    });
</script>

Web API項目的Web.config：

<system.webServer>
    <httpProtocol>
        <customHeaders>
            <add name="Access-Control-Allow-Origin" value="*" />
            <add name="Access-Control-Allow-Headers" value="Content-Type" />
            <add name="Access-Control-Allow-Methods" value="GET, POST, PUT, DELETE, OPTIONS" />
        </customHeaders>
    </httpProtocol>
</system.webServer>

Web API項目中的WebApiConfig：

public static class WebApiConfig
{
    public static void Register(HttpConfiguration config)
    {
        config.EnableCors();

        // Web API configuration and services

        // Web API routes
        config.MapHttpAttributeRoutes();

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

        //set API to return JSON
        config.Formatters.JsonFormatter.SupportedMediaTypes.Add(new MediaTypeHeaderValue("text/html"));
    }
}

Answer 1

由於行config.EnableCors()沒有任何顯式配置的情況下啟用CORS，我的猜測是您的自定義標頭被CORS模塊覆蓋。

您可以在啟用時嘗試添加全局CORS配置，例如：

public static class WebApiConfig
{
    public static void Register(HttpConfiguration config)
    {
        var corsAttr = new EnableCorsAttribute("*", "*", "*");
        config.EnableCors(corsAttr);

        // Rest of config ...
    }
}

我建議使用這種方法（具有更嚴格的起源集）並從web.config中刪除<customHeaders> 。

資料來源： https ： //enable-cors.org/server_aspnet.html （全球啟用）