我正在使用 .Net Core 构建 API 和 Angular Web 应用程序来使用这些 API。两者都使用不同的端口在本地托管。
.Net 核心 API: http://localhost:5000
Angular Web 应用程序: 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);
}
}
当我通过 Angular App 调用 API 方法时,它会引发以下错误:
从源“ http://localhost:4444 ”访问“ http://localhost:5000/api/Advertisements ”处的 XMLHttpRequest已被 CORS 策略阻止:Access-Control-Allow 不允许请求标头字段内容类型- 预检响应中的标头。
我在我的 .Net Core 中添加了 CORS,如下所示在ConfigureServices方法中:
services.AddCors(options =>
{
options.AddPolicy(MyAllowSpecificOrigins,
builder =>
{
builder.WithOrigins("http://localhost:4444");
});
});