Angular 4，XHR 加载失败：POST

Question

我已经按照这篇文章开发了一个基于令牌的认证后端服务：

http://bitoftech.net/2014/06/01/token-based-authentication-asp-net-web-api-2-owin-asp-net-identity/

这一切都按预期工作，我可以使用 winforms 应用程序进行身份验证，在 c# 中使用 restsharp 检索令牌没有问题。现在我开始使用 Angular 4 开发一个 Web 前端，并正在尝试修改它：

http://jasonwatmore.com/post/2016/08/16/angular-2-jwt-authentication-example-tutorial

使用此代码从我的后端获取令牌：

 login(username: string, password: string): Observable<boolean> {

        let data = "grant_type=password&username=" + username + "&password=" + password;

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

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

        return this.http.post('http://localhost:61814/token', data, options)
        .map((response: Response) => {
            // login successful if there's a jwt token in the response
            let user = response.json();
            if (user && user.token) {
                // store user details and jwt token in local storage to keep user logged in between page refreshes
                localStorage.setItem('currentUser', JSON.stringify(user));
            }
        
            return user;
        })
        
    }

login() {
        this.loading = true;
        this.authenticationService.login(this.model.username, this.model.password)
            .subscribe(
                data => {
                    this.router.navigate([this.returnUrl]);
                },
                error => {
                    this.alertService.error(error);
                    this.loading = false;
                });
    }

但是当我在 chrome devtools 中调试时没有任何反应，网络选项卡中没有任何内容，只有 XHR 加载失败：控制台中的“POST”。

对前端开发还很陌生，并且在这方面真的很挣扎！

Answer 1

如果您的 Backend Project 是一个单独的项目和在 http:\localhost:61814 中运行的 api 项目，并且您的 Frontend Project 是一个在 http:\localhost:4200 中运行的 angular 项目，您的问题是跨域资源共享 (CORS) 对于此问题，您必须在 angular 中创建 proxy.config.json项目并放入此代码中：

{
    "/api/*": {
        "target": "http://localhost:61814",
        "secure": false,
        "logLevel": "debug"
    }
}

然后将此文件影响到 angular 项目中以运行 anular 项目使用

npm start（而不是 ng serve）

Answer 2

如果您的后端 API 项目在 http:\localhost:61814 上运行，那么如果您在带有密钥 Authorization

response.setHeader("Access-Control-Allow-Origin", "*");
response.setHeader("Access-Control-Allow-Methods", "POST, GET, OPTIONS, DELETE");
response.setHeader("Access-Control-Max-Age", "3600");
response.setHeader("Access-Control-Allow-Headers", "x-requested-with, authorization, cache-control");
response.setHeader("Access-Control-Expose-Headers", "Authorization");

并且在 login(username: string, password: string) 服务函数中应该...

enter code herelogin(username: string, password: string): Observable<boolean> {

    let data = "grant_type=password&username=" + username + "&password=" + password;

    let headers = new Headers();
    headers.append('Content-Type', 'application/json');

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

    return this.http.post('http://localhost:61814/token', data, options)
     .map((response: Response) => {
            // login successful if there's a jwt token in the response
            return response;
        });

}

还有 login() 函数

login() {
    this.loading = true;
    this.authenticationService.login(this.model.username, this.model.password)
        .subscribe(
            data => {
            let token = data.headers.get('Authorization')
            //console.log(this.token)
            // store username and jwt token in local storage to keep user logged in between page refreshes
            sessionStorage.setItem('token', token);

                this.router.navigate([this.returnUrl]);
            },
            error => {
                this.alertService.error(error);
                this.loading = false;
            });
}