2017-05-04 10 views
2

ここでは取引があります。ASP.NETコアWeb ApiサーバーにRESTapiがあります。私はデータの郵便番号を取得しようとしているとき、私は単純にHTTP取得要求を取得し、SQL Serverからデータを取得した後、このhttp://localhost:5000/api/account/loginのようなコントローラへのHTTP投稿要求を行います(ユーザー名、パスワード)。私はバックエンドサーバが大丈夫だと理解しています。 でも、フロントエンド側には角2があります。私は、ログインページ上の情報(すなわち、ユーザー名とパスワード)を入力するログインコンポーネントを作成しました。だから私は情報を入力する角度はこれを取るStatusCode 200を送信し、私はhttpを行うしようとしている次のページに移動するRESTapiを介してデータベースのメインデータへのリクエストを取得します。
1)GET http://localhost:5000/Account/Login?ReturnUrl=%2Fapi%2Fwork 404 (Not Found)
2)私は単純にPOSTリクエスト後に主なデータを取得していますポストマンにUnexpected end of JSON input
けれども:メインデータを使用したページに私をナビゲートする際の角度 だから、それだけで2つのエラーがスローされます。
ここでは、すべてのポストと方法がありますdata.service.tsからのコードの一部です:
JSON入力の予期せぬ終了Angular 2(4)http get request

getWorks(): Observable<IWork[]>{ 
     let headers = new Headers(); 
     headers.append('Content-Type', 'application/json'); 
     return this.http.get(this._baseUrl + 'work') 
      .map((result: Response) => { 
       return result.json(); }) 
     .catch(this.handleError); 
    } 



login(user : User) { 
     let headers = new Headers(); 
     headers.append('Content-Type', 'application/json'); 
     return this.http.post(this._baseUrl + 'account/login', JSON.stringify(user), { headers: headers }) 
      .map((result: Response) => { 
       return result.json(); 
      }).catch(this.handleError); 
    } 

機能、ユーザのはlogin.component.ts

login() : void { 
     let _authenticationResult: OperationResult = new OperationResult(true, ''); 
     this.dataService.login(this._user).subscribe((result: any) => { 
      _authenticationResult.succeeded = result.succeeded; 
      _authenticationResult.message = result.message; 

      if(_authenticationResult.succeeded) { 

       this.notificationService.printSuccessMessage('Welcome ' + this._user.username + '!'); 
       localStorage.setItem('user', JSON.stringify(this._user)); 
       this.router.navigate(['/list']); 
       return result.status = "200"; 
      } else { 
       this.notificationService.printErrorMessage(_authenticationResult.message); 
      } 
     }), 
     error => console.error('Error: ' + error); 
    } 

そして、メイン・データ・ファイルのリストを取得するには許可、-work.component.ts

getData() { 
     this.dataService.getWorks().subscribe(result => { 
      this.works = result; 
      this.subscribeToData(); 
     }, error => { 
      this.notificationService.printErrorMessage('Authentication reqired'); 
      this.utilityService.navigateToSignIn(); 
      console.error('Error: '+ error); }); 
    } 

それが役に立つよもしここで私は、データを取得WEBAPI(.NETのコア)からのコードの一部ですが、私は契約が、ここではないと思いますそれがすべてPostmanに働いているからです。

[Authorize(Policy = "AdminOnly")] 
    public async Task<IActionResult> Get() 
    { 
     if (await _authorizationService.AuthorizeAsync(User, "AdminOnly")) 
     { 
      IEnumerable<Work> _works = _workRepository 
      .AllIncluding(c => c.Creator, t => t.Type, time => time.Time, s => s.Stage) 
      .OrderBy(x => x.Id) 
      .ToList(); 
      IEnumerable<WorkViewModel> _workVM = Mapper.Map<IEnumerable<Work>, IEnumerable<WorkViewModel>>(_works); 

      return new OkObjectResult(_workVM); 
     } 
     else 
     { 
      StatusCodeResult _codeResult = new StatusCodeResult(401); 
      return new ObjectResult(_codeResult); 
     } 
    } 

助けを借りてください。ありがとう!
アップデート1(NotBad4Uに感謝):

export class MyBaseRequestsOptions extends BaseRequestOptions { 
    headers: Headers = new Headers({ 'X-Requested-With': 'XMLHttpRequest' }); 
    withCredentials: any = true; 
} 
export class DataService extends MyBaseRequestsOptions{ 
login(user : any) { 
     let headers = new Headers(); 
     headers.append('Content-Type', 'application/json'); 

     return this.http.post(this._baseUrl + 'account/login', JSON.parse(JSON.stringify(user)), { headers: headers }) 
      .map((result: Response) => { 
       return result.json(); 
      }).catch(this.handleError); 
    } 
getWorks(): Observable<IWork[]>{ 
     let headers = new Headers(); 
     headers.append('Content-Type', 'application/json'); 
     return this.http.get(this._baseUrl + 'work' ,{ headers: headers }) 
      .map((result: Response) => { 
       return console.log(result); 
       }) 
     .catch(this.handleError); 
    } 
+0

をよくエラーがURLが検出されないことを意味する、404です。正しいURLを確認する必要があります:) – Alex

+0

@ AJT_82ユーザーが承認されていない場合に表示されます。それについて言及するのを忘れました:) – Muro

+0

'.map((result:Response)=> { return result.json();})'というコールにコンソールログを置くことができます。空の 'Response'を取得し、' result.json() 'コールによって'予期せぬJSON入力の終了 'が発生したと思います。 – NotBad4U

答えて

2

は、私はあなたのクッキーが保存されることはありませんだと思う、あなたは(あなたのケースで401)404を取得し、なぜそれがあります。これは、クロスドメインリクエスト(CORS)の場合、XHRのwithCredentialsをtrueに設定して、ブラウザがリクエストにCookieを追加する必要があるためです。

は、だからあなたのapp.moduleにあなたが設定する必要があります。

import {CookieService} from "./shared/cookie.service"; 

export class MyBaseRequestsOptions extends BaseRequestOptions { 
    headers: Headers = new Headers({ 
     'X-Requested-With': 'XMLHttpRequest' 
    }); 
    withCredentials: boolean = true; 
} 

@NgModule({ 
    declarations: [ 
    AppComponent, 
    .... 
    ], 
    imports: [ 
    .... 
    ], 
    providers: [ 
    CookieService, 
    { 
     provide: RequestOptions, 
     useClass: MyBaseRequestsOptions 
    } 
    ], 
    bootstrap: [AppComponent] 
}) 
export class AppModule { } 
+1

Yeeeeeeeeeeeeeeeaaaaahhhh、ちょうど約3日私はセットアップしていた問題!どうもありがとうございました!私はあなたの答えに会えてうれしいです!仲間ありがとう!あなたはいつかあなたがそれを解決するのを手助けする男を見つけるだろういくつかの問題を抱えていると確信しています:) – Muro

+0

最後に私たちはそれをしました:)私はそれを聞いてうれしいです。 – NotBad4U

関連する問題