ajax - 谷歌浏览器中的传输错误

Question

在我自己的机器上调用网络服务时，我在 Chrome 中遇到错误。错误是：

Origin http://localhost:52386 is not allowed by Access-Control-Allow-Origin.

我在这里阅读了其他问题和这样的文章：Cross Domain AJAX；但他们倾向于处理 IE 无法正常工作的问题，而我的 Chrome 也有问题。

我将以下内容添加到我的 webservice/Global.asax.cs 中：

protected void Application_BeginRequest(object sender, EventArgs e)
{
    //HttpContext.Current.Response.AddHeader("Access-Control-Allow-Origin", "*");
    // Changed to this:
    HttpContext.Current.Response.AddHeader("Access-Control-Allow-Origin", "http://localhost:52386");
    HttpContext.Current.Response.AddHeader("Access-Control-Allow-Origin", "http://localhost:80");

}

这是我的 HTML 代码（我需要将其保存为纯 HTML，后面没有代码）：

    $(document).ready(function () {
        var user = 'testuser';
        var pwd = 'abc123';
        var auth = 'Basic ' + Base64.encode(user + ':' + pwd);
        if ($.browser.msie) {
            jQuery.support.cors = true;
            $.ajax({
                type: "GET",
                url: "http://localhost/Website.Webservice/api/TaxDocument",
                data: "{}",
                contentType: "application/json; charset=utf-8",
                dataType: "text json",
                headers: { Authorization: auth },
                crossDomain: true,
                success: function (data, textStatus, jqXHR) { ProcessOutput(data); },
                error: function (jqXHR, textStatus, errorThrown) { alert('Error: ' + textStatus + ' ' + errorThrown); }
            });
        } else {
            $.ajax({
                type: "GET",
                url: "http://localhost/Website.Webservice/api/TaxDocument",
                data: "{}",
                contentType: "application/json; charset=utf-8",
                crossDomain: true,
                dataType: "json",
                headers: { Authorization: auth },
                success: function (data, textStatus, jqXHR) { ProcessOutput(data); },
                error: function (jqXHR, textStatus, errorThrown) { alert('Error: ' + textStatus + ' ' + errorThrown); }
            });
        }
    })

Answer 1

好的，所以这是一个相当大的问题。首先，IIS 7.5 和 VS 开发服务器，以及 IIS Express 处理 CORS 的方式不同。主要问题是我的网络服务没有响应来自 chrome 和 firefox 的 OPTIONS 请求；IE 和 Safari 根本不在乎。

我使用了 ThinkTecture 的 NuGet 包，它有一个 CORS 处理程序。请参阅此处的讨论：CORS 支持。

我修改后的 JS 现在不关心浏览器了（我在 IE、Safari、Chrome 和 FireFox 中测试过）

<script type="text/javascript">
        var GetTaxDocument = function () {
            var url = "http://myWebService.com/WebService/Api/Products;
            var user = "myUser";
            var pwd = "pwd123";
            var auth = Base64.encode(user + ':' + pwd);

            jQuery.support.cors = true;
            $.ajax({
                type: "GET",
                url: url,
                //data: "{}",
                contentType: "application/json; charset=utf-8",
                dataType: "text json",
                headers: { Authorization: 'Basic ' + auth },
                crossDomain: true,
                success: function (data, textStatus, jqXHR) {ProcessOutput(data); }
                error: function (jqXHR, textStatus, errorThrown) { alert('Error: ' + textStatus + ' ' + errorThrown.message); }
            });
        };

        var ProcessOutput = function (data) {
            var body = "";
            $.each(data, function () {
                var row = "";
                row += "ID:   " + this.ID + "<br />";
                row += "Desc: " + this.Desc + "<br />";
                body += "<p>" + row + "</p>";
            })
            $('#results').html(body);
        };
    </script>

我在 global.asax.cs 中添加了以下内容：

        protected void Application_Start()
    {
        AreaRegistration.RegisterAllAreas();

        WebApiConfig.Register(GlobalConfiguration.Configuration);
        FilterConfig.RegisterGlobalFilters(GlobalFilters.Filters);
        RouteConfig.RegisterRoutes(RouteTable.Routes);
        BundleConfig.RegisterBundles(BundleTable.Bundles);

        GlobalConfiguration.Configuration.MessageHandlers
          .Add(new BasicAuthMessageHandler()
          {
              PrincipalProvider = new AuthenticationPrincipalProvider()
          });
        //This is the CORS handler
        CorsConfig.RegisterCors(GlobalConfiguration.Configuration);

    }

在我的 App_start\CorsConfig.cs 中，如下：

public class CorsConfig
{
    public static void RegisterCors(HttpConfiguration httpConfig)
    {
        WebApiCorsConfiguration corsConfig = new WebApiCorsConfiguration();

        // this adds the CorsMessageHandler to the HttpConfiguration’s
        // MessageHandlers collection
        corsConfig.RegisterGlobal(httpConfig);

        // this allow all CORS requests to the Products controller
        // from the http://foo.com origin.
        corsConfig
            .ForResources("TaxDocument")
            //.ForOrigins("http://localhost", "http://localhost:49878", "http://localhost:52386")
            .AllowAllOrigins()
            .AllowAll();
    }
}

localhost:52386 和 localhost:49878 解决了我在调用在 localhost 上运行的 web 服务并从 VS 调试网页时遇到的问题。当我调试在 49878 上运行的 web 服务并在 localhost 或 52386 上运行网页时，添加 localhost 会有所帮助。我最终切换到.AllowAll()现在，因为我正在从 FILE:///c:/myWebPage.html 加载 HTML

如果我需要添加更多细节，请给我一些反馈和/或让我知道。