相关疑难解决方法(0)

如何通过JavaScript发送跨域POST请求？

注意 - 它不应该刷新页面,然后我需要抓取并解析响应.

我正在编写一个JavaScript客户端以包含在第三方网站上(想想Facebook Like按钮).它需要从需要基本HTTP身份验证的API检索信息.简化的设置如下所示:

第三方网站在其网页上包含以下代码段:

<script 
async="true"
id="web-dev-widget"
data-public-key="pUbl1c_ap1k3y"
src="http://web.dev/widget.js">
</script>

widget.js调用API:

var el = document.getElementById('web-dev-widget'),
    user = 'token',
    pass = el.getAttribute('data-public-key'),
    url = 'https://api.dev/',
    httpRequest = new XMLHttpRequest(),
    handler = function() {
      if (httpRequest.readyState === 4) {
        if (httpRequest.status === 200) {
          console.log(httpRequest.responseText);
        } else {
          console.log('There was a problem with the request.', httpRequest);
        }
      }
    };

httpRequest.open('GET', url, true, user, pass);
httpRequest.onreadystatechange = handler;
httpRequest.withCredentials = true;
httpRequest.send();

API已配置为使用适当的标头进行响应:

Header set Access-Control-Allow-Credentials: true
Header set Access-Control-Allow-Methods: "GET, OPTIONS"
Header …

我有一个运行Windows身份验证的WebAPI 2 REST服务.它与网站分开托管,因此我使用ASP.NET CORS NuGet包启用了CORS.我的客户端站点正在使用AngularJS.

到目前为止,这是我经历过的:

1. 我没有设置withCredentials,因此CORS请求返回401.通过在我的$ httpProvider配置中添加withCredentials解决了这个问题.
2. 接下来,我使用通配符源设置了EnableCorsAttribute,使用凭据时不允许这样做.通过设置明确的原始列表解决.
3. 这使我的GET请求成功,但我的POST发出了预检请求,而我没有创建任何控制器操作来支持OPTIONS动词.为了解决这个问题,我将MessageHandler实现为全局OPTIONS处理程序.它只是为任何OPTIONS请求返回200.我知道这不完美,但现在在Fiddler工作.

我被困的地方 - 我的Angular预检电话不包括凭据.根据这个答案,这是设计,因为OPTIONS请求被设计为匿名.但是,Windows身份验证使用401停止请求.

我已经尝试将[AllowAnonymous]属性放在我的MessageHandler上.在我的开发计算机上,它可以工作 - OPTIONS动词不需要身份验证,但其他动词可以.但是,当我构建并部署到测试服务器时,我将继续在我的OPTIONS请求中获得401.

使用Windows身份验证时,是否可以在我的MessageHandler上应用[AllowAnonymous]？如果是的话,有关如何做的任何指导？或者这是一个错误的兔子洞,我应该看一个不同的方法？

更新:我能够通过在IIS中的站点上设置Windows身份验证和匿名身份验证来使其工作.这导致一切都允许匿名,所以我添加了一个全局的Authorize过滤器,同时保留了MessageHandler上的AllowAnonymous.

然而,这感觉就像一个黑客...我一直都明白只应该使用一种身份验证方法(不混合).如果有人有更好的方法,我会很感激听到它.