如何使用Web服务和jQuery Ajax启用CORS

我有一个WebService（.asmx）页面，其中包含许多我想从另一个页面运行的功能。我想使用ajax调用函数的网页与web服务的来源不同。当我尝试以下ajax调用时：

$.ajax({
        type: "POST",
        url: "http://192.168.18.218/WebSite/Pages/DBQuery.asmx/GetTestList",
        crossDomain: true,
        contentType: 'application/json; charset=utf-8',
        data: JSON.stringify({
            'filterID': 0
        }),
        dataType: "json",
        success: function (data)
        {
            data = JSON.parse(data.d);
            console.log(data);
        }
    });

我得到以下错误：

无法加载XMLHttpRequest . 回应 飞行前请求未通过访问控制检查：否 “Access Control Allow Origin”标头出现在请求的服务器上 资源。因此，不允许访问源“”。 响应的HTTP状态代码为404

我可以使用作为url提供的确切链接，该链接位于web服务所在的同一台机器上，并且一切正常。使用InternetExplore11或edge的这个ajax调用也可以很好地工作，但是当从GoogleChrome运行该命令时，会出现上述错误

读起来，这似乎是我的web服务的一个问题，它没有为CORS的响应包添加正确的字段，所以google chrome设置捕捉到它并抛出一个错误。我已经尝试编写用于web API的代码，以启用CORS（请参阅下面的代码块）

这似乎不起作用，我无法找到使用web服务而不是web API解决此问题的文档。如何修复web服务和/或ajax调用以正确启用CORS

编辑 将以下代码行添加到web配置文件修复了未添加头的CORS部分的问题：

    <httpProtocol>
      <customHeaders>
        <add name="Access-Control-Allow-Headers" value="*" />
        <add name="Access-Control-Allow-Origin" value="*" />
        <add name="Access-Control-Allow-Methods" value="*" />
      </customHeaders>
    </httpProtocol>

---

然而，我仍然得到一个404错误。在托管web服务的机器上测试ajax调用，ajax工作正常，符合预期。然而，在跨源运行时，我得到了404错误。

即使将自定义头添加到web配置中，404错误仍然存在。这最终是由于报头仍然不完全正确，或者ISAPI截获了带有选项动词的数据包，并导致了一些问题，我从未找到确切的原因。我的解决方案是删除对web配置的更改，并添加一个带有以下代码的全局asax文件：

<%@ Application Language="C#"%>

<script RunAt="server">
    void Application_BeginRequest(object sender, EventArgs e)
    {
        var context = HttpContext.Current;
        var response = context.Response;

        // enable CORS
        response.AddHeader("Access-Control-Allow-Origin", "*");

        if (context.Request.HttpMethod == "OPTIONS")
        {
            response.AddHeader("Access-Control-Allow-Methods", "GET, POST, OPTIONS");
            response.AddHeader("Access-Control-Allow-Headers", "Content-Type, Accept");
            response.End();
        }
    }
</script>

无效应用程序\u BeginRequest（对象发送方，事件参数e）
{
var context=HttpContext.Current；
var-response=context.response；
//启用CORS
AddHeader（“访问控制允许来源”，“*”）；
if（context.Request.HttpMethod==“选项”）
{
AddHeader（“访问控制允许方法”、“获取、发布、选项”）；
AddHeader（“访问控制允许头”，“内容类型，接受”）；
response.End（）；
}
}

---

这确保数据包具有正确的头。您必须删除我在问题中提到的web配置，因为它会添加两次，这也会导致ajax调用失败。

在2021年，这仍然适用于我。这是一个直截了当的解决方案，我必须注意一点，您必须从web.config文件中删除重复的信息，而且它是有效的。因为我需要在android应用程序后端使用webservices。

<%@ Application Language="C#"%>

<script RunAt="server">
    void Application_BeginRequest(object sender, EventArgs e)
    {
        var context = HttpContext.Current;
        var response = context.Response;

        // enable CORS
        response.AddHeader("Access-Control-Allow-Origin", "*");

        if (context.Request.HttpMethod == "OPTIONS")
        {
            response.AddHeader("Access-Control-Allow-Methods", "GET, POST, OPTIONS");
            response.AddHeader("Access-Control-Allow-Headers", "Content-Type, Accept");
            response.End();
        }
    }
</script>