Я использую .Net Core для создания API и Angular Web-приложения для использования этих API. Оба размещаются локально с разными портами.
.Net Core API: http://localhost:5000
Angular Web App: http://localhost:4444
Вот мои методы обслуживания в Angular
export class AdvertisementService {
// Define API
apiURL = environment.apiUrl;
constructor(private http: HttpClient) {}
// Configure HTTP Options
httpOptions = {
headers: new HttpHeaders({
'Content-Type': 'application/json'
})
}
// HttpClient API get() method => Fetch Advertisement List.
getAdvertisements(): Observable<Advertisement[]> {
return this.http.get<Advertisement>(this.apiURL + '/Advertisements')
.pipe(retry(1),catchError(this.handleError))
}
// HttpClient API post() method => Create Advertisement
createAdvertisement(advertisement): Observable<Advertisement> {
return this.http.post<Advertisement>(this.apiURL + '/Advertisements', JSON.stringify(advertisement), this.httpOptions)
.pipe(retry(1),catchError(this.handleError))
}
private handleError(error: any): Promise<any> {
console.error('An error occurred', error); // for demo purposes only
return Promise.reject(error.message || error);
}
}
Когда я вызываю методы API через Angular App, выдается следующее сообщение об ошибке:
Доступ к XMLHttpRequest по адресу
'http://localhost:5000/api/Advertisements' от происхождения
'http://localhost:4444' заблокирован политикой CORS: Запрос
Тип содержимого заголовка поля не разрешен
Access-Control-Allow-Headers в предполетном ответе.
Я добавил CORS в свое .Net Core, как показано ниже в ConfigureServices метод:
services.AddCors(options =>
{
options.AddPolicy(MyAllowSpecificOrigins,
builder =>
{
builder.WithOrigins("http://localhost:4444");
});
});