Question

我有一个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无法加载 http://192.168.18.218/WebSite/Pages/DBQuery.asmx/GetTestList。响应预检请求没有通过访问控制检查：否＆＃39;访问控制允许来源＆＃39;标题出现在请求的上资源。起源＆＃39; http://localhost＆＃39;因此不允许访问。响应的HTTP状态代码为404.

我可以使用在与托管Web服务的同一台计算机上的浏览器上提供的确切链接，并且一切都按预期工作。使用来自Internet explore 11或边缘的这个ajax调用也很好，但是当从google chrome运行命令时，它会给出上述错误。

读起来似乎这是我的网络服务没有在CORS的响应数据包中添加正确的字段的问题，因此谷歌浏览器设置捕获它并引发错误。我尝试使用用于Web API的代码来启用CORS（参见下面的代码块）。

public static void Register(HttpConfiguration config)
    {
        //TODO: determine acceptable origins
        var corsAttr = new EnableCorsAttribute("*", "*", "*"); //accept all origins, headers, and methods
        config.EnableCors(corsAttr); //enable cross origin requests
    }

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

EDIT 将以下代码行添加到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错误。

Answer 1

即使将自定义标头添加到Web配置后，仍会出现404错误。这最终是由于标题仍未完全正确或ISAPI使用OPTIONS动词拦截数据包并导致一些我从未弄清楚确切原因的问题。我的解决方案是删除对Web配置的更改，并使用以下代码添加Global 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>

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

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

1 个答案: