javascript - 如何使用 http-client 与 Aurelia 请求跨域

Question

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

设置:我有一个包含两个项目的 Visual Studio 解决方案。

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

1. API 项目正在为我的 GetAll 路由提供服务，没有任何问题，我可以使用 postman 到达终点，我得到了一个很大的结果杰森。我已经启用并正确设置了 CORS，我已经排除了这种可能性作为一个问题。
2. 我的客户端项目在 wwwroot 目录中运行 Aurelia我正在使用 aurelia-http-client我将提供代码因为，但我会告诉你我将提供的示例适用于使用我在目录中的平面文件没有问题客户项目。
3. 只要我将 Get() 请求指向我自己项目中的平面文件(当然)，我就可以毫无问题地提取数据并使用它。只有当我将 url 切换为指向不同域上的端点时，我才会收到 401(未授权)错误。

这是我的代码(一个 ES6 Aurelia 模块)，它是数据资源:

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 身份验证并能够从一个域运行客户端应用程序，让我们调用该域 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 }
    );
}

Answer 1

您应该尝试的第一件事是删除原点中的尾部正斜杠。我很确定这就是导致您出现问题的原因:

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

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

<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>

此外，IIS 选项处理程序可能会干扰某些事情，因此请确保将其删除，即

<system.webServer>
    <handlers>
    ...
       <remove name="OPTIONSVerbHandler"/>
    ...
    </handlers>
</system.webServer>

作为最后的手段，您还可以尝试通过使用以下参数启动它来禁用 chrome 中的 CORS 安全性 --disable-web-security --user-data-dir 或在中创建别名您的本地主机的主机文件并改用它。如果所有 header 都已正确设置，则实际上不需要这样做。

另一件事，由于您希望通过凭据发送，因此您将无法对允许的域使用通配符。我想这是不言而喻的:)。话虽如此，您可能还需要执行以下操作:

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