角4，XHR加載失敗：POST

我已經按照這篇文章，以開發基於令牌的認證後端服務：角4，XHR加載失敗：POST

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

這一切都按預期工作，我可以用一個WinForms應用程序認證在c＃中使用restsharp檢索標記沒有問題。現在我來用角4開發一個web前端，我試圖修改此：

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; 
 
     }) 
 
     
 
    }

：

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

使用此代碼從我的後端獲得令牌

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「在控制檯中。

對於前端開發來說很新穎，並且真正爲此而苦苦掙扎！

來源

2017-10-20 paparoacho

這看起來好像沒什麼問題。如果你把console.log放在各種方法中，它們是否都被調用？ – Joe

是的，他們現在。我重新啓動了我的後端解決方案，它似乎工作。奮鬥了！謝謝 – paparoacho

如果您後端項目是一個單獨的項目和API項目，在HTTP運行：\本地主機：61814和你前端項目的是，在HTTP運行的角度項目：\本地主機：4200，你的問題是跨來源資源共享（CORS）對於這個問題，你一定要proxy.config.json角項目中，並把這個代碼裏面：

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

，然後影響到這個文件爲運行纖維環項目中使用

NPM啓動角項目（而不是NG服務）

來源

2017-10-20 22:01:01

角4，XHR加載失敗：POST

回答

相關問題