Question

我正在开发一个Angular 2应用程序，该应用程序正在对ASP.NET Web API 2服务进行服务调用。在此服务中，CORS已在WebApiConfig中启用，如此：

public static class WebApiConfig
{
    public static void Register(HttpConfiguration config)
    {
        ...

        var cors = new EnableCorsAttribute("*", "*", "*");

        config.EnableCors(cors);

        ...

    }
}

这一直很好，我没有遇到任何CORS问题。例如，调用/api/users会成功检索所有用户。

现在我尝试使用.NET Identity Token进行登录功能，这给了我与CORS相关的问题。致电/token以在login.service.ts中执行登录时：

loginUser(username: string, password: string) {
    let serviceURL = 'http://myurl/token';

    let body = 'username=' + username + '&password=' + password + '&grant_type=password';

    let headers: Headers = new Headers();
    headers.append('Content-Type', 'application/x-www-form-urlencoded');

    let options: RequestOptions = new RequestOptions({
        headers: headers
    });

    return this.http.post(serviceURL, body, options)
        .map(res => this.extractData(res))
        .catch(this.handleError);
}

我收到以下错误：

XMLHttpRequest cannot load http://myurl/token. No 'Access-Control-Allow-Origin' header is present on the requested resource. Origin 'http://localhost:3000' is therefore not allowed access. The response had HTTP status code 400.

我发现这令人困惑有两个原因：

如上所述，我在/api来电中没有任何CORS问题
当我输入正确的凭据时，呼叫是＆＃34;成功＆＃34; （即Status Code 200但我收到上面列出的错误。

我看过很多不同的文章都有类似的实现，我似乎无法找到我的错误。

Answer 1

好的，所以我终于找到了发生这种情况的原因。正如here中所强调的那样，/token端点似乎在WebApiConfig之前被初始化，因此这里的任何设置都不会为/token端点启用CORS。

要为此端点启用此功能，还应在IdentityConfig.cs Create功能中添加以下内容：

public static ApplicationUserManager Create(IdentityFactoryOptions<ApplicationUserManager> options, IOwinContext context)
{

    context.Response.Headers.Add("Access-Control-Allow-Origin", new[] { "*" });

    ...

}

Angular 2使用ASP.NET身份令牌登录

1 个答案: