2017-12-30 18 views
0

私はAngular2を初めて使用しています。そして、私の.net core APIにPOSTメソッドを呼び出そうとしています.Postmanとうまくいっています。しかし、私がAngular 2サービスから呼び出すと、エラーになります。角2プリフライト要求に対する応答がアクセス制御チェックに合格しません:いいえ 'Access-Control-Allow-Origin'ヘッダ

enter image description here

は、これは私のapi.service.ts

import { Injectable } from '@angular/core'; 
 
import { environment } from '../../../environments/environment'; 
 
import { Headers, Http, Response, URLSearchParams } from '@angular/http'; 
 
import { Observable } from 'rxjs/Rx'; 
 
import 'rxjs/add/operator/map'; 
 
import 'rxjs/add/operator/catch'; 
 

 
import { JwtService } from './jwt.service'; 
 

 
@Injectable() 
 
export class ApiService { 
 
    constructor(
 
    private http: Http, 
 
    private jwtService: JwtService 
 
) {} 
 

 
    private setHeaders(): Headers { 
 
    const headersConfig = { 
 
     'Content-Type': 'application/json', 
 
     'Accept': 'application/json', 
 
     'Access-Control-Allow-Origin': '*' 
 
    };  
 

 
    if (this.jwtService.getToken()) { 
 
     headersConfig['Authorization'] = `Token ${this.jwtService.getToken()}`; 
 
    } 
 
    return new Headers(headersConfig); 
 
    } 
 

 
    post(path: string, body: Object = {}): Observable<any> { 
 
    
 
    return this.http.post(
 
     `${environment.api_url}${path}`, 
 
     JSON.stringify(body), 
 
     { headers: this.setHeaders() } 
 
    ) 
 
    .catch(this.formatErrors) 
 
    .map((res: Response) => res.json()); 
 
    }

体は、.NETコアAPIが優先mothod enter image description here

値である enter image description here

+0

サーバサイドCORSの実装を見てください。 https://developer.mozilla.org/en-US/docs/Web/HTTP/CORS – Stack

答えて

5

これはCORSの問題です。これは、別のホストからリソースを要求しようとしているために発生します。あなたのAPIはこれらのOPTIONSリクエストに正しく答える必要があります。そうしないと、ブラウザはリクエストをブロックします。あなたの要求が正常に動作しますので、

https://developer.mozilla.org/en-US/docs/Web/HTTP/CORS

CORS保護は郵便配達に実装されていません。

編集:あなたのバックエンドが本番で同じホスト上で実行するために起こっている場合にもWebPACKの/角度CLIのプロキシサポートを使用することができます。 https://github.com/angular/angular-cli/blob/master/docs/documentation/stories/proxy.md

+0

ハイ5 - 同じリンク、同じ時間 – Stack

0

Guysはあなたの助けをありがとうございました。私はそれを解決した。私のWeb APIにCORSを実装していないため、エラーが発生したと述べています。この記事は私を助けました:ASP.NET Core and CORS Gotchas

関連する問題