Javascript 如何使用http客户端跨域请求Aurelia

我有一个简单的数据资源，可以从我自己的项目中检索平面json文件。当我试图用运行在单独域上的工作API端点的url替换url时，chrome中会出现401未经授权的错误

设置：我有一个包含两个项目的VisualStudio解决方案

1 RateAppAPI WebAPI项目w/ 2 RateAppClient ASPNET 5模板w/ 3我有一个平面文件和一个API端点提供相同的json文档。您将在代码中看到一个已注释，另一个未注释

API项目正在为我的GetAll路由提供服务，没有问题，我可以 使用postman点击端点，我得到了 Json。我已经启用了CORS，并且设置正确，我已经排除了这种可能性 作为一个问题。 我让客户机项目在wwwroot目录中运行Aurelia 我正在使用它，我将提供代码 例如，但我要告诉你，我将提供的示例适用于 使用我所在目录中的平面文件没有问题 客户项目。 当然，只要我将Get请求指向我自己项目中的平面文件，我就可以毫无问题地提取数据并使用它。只有当我将url切换到指向另一个域上的端点时，才会出现错误。 以下是我的ES6模块代码，该模块是数据资源：

import {inject} from "aurelia-framework";
import {HttpClient} from "aurelia-http-client";

let baseURL = "http://localhost/RateAppAPI/api/UtilZip/ByUtil/7";
//let baseURL = "../api/utilzip/utilzip.json";

@inject(HttpClient)

export class UtilZipData {

constructor(httpClient) {
    this.http = httpClient;
    this.http.configure(x => { x.withCredentials(); });
}

getAll() {
    return this.http.get(baseURL)
        .then(response => {
            return response.content;
        });
    }
}

最后，我需要弄清楚如何仅使用Windows Auth并能够从一个域运行客户端应用程序，让我们调用该域localhost:1234并访问另一个域，让我们调用API域localhost/RatAppAPI。API将使用以下方法启用CORS：

public static void Register(HttpConfiguration config)
{
    var cors = new EnableCorsAttribute("http://localhost:1234/", "*", "*");
    config.EnableCors(cors);
    config.MapHttpAttributeRoutes();

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

---

您应该尝试的第一件事是删除原点中的尾随正斜杠。我很确定这就是给您带来一些问题的原因：

var cors = new EnableCorsAttribute("http://localhost:1234/", "*", "*");
//Should be the following instead
var cors = new EnableCorsAttribute("http://localhost:1234", "*", "*");

另外，假设您将在IIS上托管，并且希望将相同的CORS策略全局应用于所有控制器操作，那么您也可以从配置中执行此操作：

<configuration>
    <system.webServer>
       <httpProtocol>
           <customHeaders>
               <add name="Access-Control-Allow-Origin" value="http://localhost:1234" />
               <add name="Access-Control-Allow-Methods" value="*" />
               <add name="Access-Control-Allow-Headers" value="*" />
           </customHeaders>
       </httpProtocol>
    </system.webServer>
</configuration>

---

我最终在我的API Global.asax中使用了以下内容

public void Application_BeginRequest(object sender, EventArgs e)
        {
    string httpOrigin = Request.Params["HTTP_ORIGIN"] ?? "*";

    HttpContext.Current.Response.AddHeader("Access-Control-Allow-Origin", httpOrigin);

    //HttpContext.Current.Response.AddHeader("Access-Control-Allow-Methods", "GET, PUT");
    HttpContext.Current.Response.AddHeader("Access-Control-Allow-Methods", "GET, POST, PUT, DELETE, OPTIONS");
    HttpContext.Current.Response.AddHeader("Access-Control-Allow-Headers", "Origin, X-Requested-With, Content-Type, Accept, dataType");
    HttpContext.Current.Response.AddHeader("Access-Control-Allow-Credentials", "true");

    if (Request.HttpMethod == "OPTIONS")
    {
        HttpContext.Current.Response.StatusCode = 200;
        var httpApplication = sender as HttpApplication;
        httpApplication?.CompleteRequest();
    }
}

---

显然，关键问题是API端点授权。我不知道windows身份验证还需要进一步说明，但它不应该特定于Aurelia或其http客户端。希望这篇评论能对那些像我一样觉得误导的人有所帮助。我只是对我在这里所做的事情做了一个全面的描述。我不确定问题出在哪里。看起来这应该是可行的，但在API或客户端应用程序中的某个地方，我在http get和API访问该端点的授权之间做了一些错误。Eric，只要在允许的源代码中删除尾随的正斜杠，一切都应该开始工作…它；It’如果有效，我将通过回顾和我学到的知识更新问题。哈哈，如果您在项目中多次启用cors并设置多个来源，那么这可能会非常棘手。首先，感谢您抽出时间。我认为这是在WebAPI方面，但我不确定，这就是为什么我给出了完整的故事。删除正斜杠和仅在一个位置设置原点的组合似乎是解决方案。让我做一些测试，我会在复述中提供我的发现。没问题，我非常乐意提供帮助。有时候，你只需要用另一双眼睛就能看到这样的东西。我想更好地理解一切，我发现了一些有趣而令人困惑的回答，我甚至关闭了enable cors，能够运行我的客户机并使用资源。很奇怪。但它正在发挥作用。如果我主持一些图片和我的发现的一些解释，你会看一看吗？当然，很高兴看一看。在关闭CORS的情况下，您能够从客户端访问资源，这听起来有点奇怪。您可能希望排除缓存作为其中的一部分。那些讨厌的GET请求被缓存：绝对。我会检查的。

var cors = new EnableCorsAttribute("http://localhost:1234", "*", "*")
{
    SupportsCredentials = true
};

public void Application_BeginRequest(object sender, EventArgs e)
        {
    string httpOrigin = Request.Params["HTTP_ORIGIN"] ?? "*";

    HttpContext.Current.Response.AddHeader("Access-Control-Allow-Origin", httpOrigin);

    //HttpContext.Current.Response.AddHeader("Access-Control-Allow-Methods", "GET, PUT");
    HttpContext.Current.Response.AddHeader("Access-Control-Allow-Methods", "GET, POST, PUT, DELETE, OPTIONS");
    HttpContext.Current.Response.AddHeader("Access-Control-Allow-Headers", "Origin, X-Requested-With, Content-Type, Accept, dataType");
    HttpContext.Current.Response.AddHeader("Access-Control-Allow-Credentials", "true");

    if (Request.HttpMethod == "OPTIONS")
    {
        HttpContext.Current.Response.StatusCode = 200;
        var httpApplication = sender as HttpApplication;
        httpApplication?.CompleteRequest();
    }
}