角2プリフライト要求に対する応答がアクセス制御チェックに合格しません：いいえ 'Access-Control-Allow-Origin'ヘッダ

Question

私はAngular2を初めて使用しています。そして、私の.net core APIにPOSTメソッドを呼び出そうとしています.Postmanとうまくいっています。しかし、私がAngular 2サービスから呼び出すと、エラーになります。

は、これは私の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

値である

Answer 1

これは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

Answer 2

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