각도 2 프리 플라이트 요청에 대한 응답이 액세스 제어 검사를 통과하지 못합니다. No 'Access-Control-Allow-Origin'헤더

Question

Angular2를 처음 사용합니다. 그리고 POST 메서드를 내 .net 핵심 API에 호출하려고합니다. 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가 첨부 :

값입니다

,

Answer 1

이것은 CORS 문제입니다. 그것은 다른 호스트의 자원을 요청하려고하기 때문에 발생합니다. API가 OPTIONS 요청에 올바르게 응답해야합니다. 그렇지 않으면 브라우저가 요청을 차단합니다. 귀하의 요청이 잘 작동되도록

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

CORS 보호 우체부에서 구현되지 않습니다.

편집 : https://github.com/angular/angular-cli/blob/master/docs/documentation/stories/proxy.md

Answer 2

이 녀석이 당신의 도움을 주셔서 감사합니다 : 백엔드 생산에 동일한 호스트에서 실행하는 것입니다 경우도 웹팩/각도 CLI의 프록시 지원을 사용할 수 있습니다. 나는 그것을 풀었다. 내 웹 API에서 CORS를 구현하지 않았기 때문에 오류가 발생했다고 말한 것입니다. 이 기사는 나를 도왔다 : ASP.NET Core and CORS Gotchas