时间戳

首页 > 解决方案 > CORS 策略已阻止从源访问 API 方法

angular - CORS 策略已阻止从源访问 API 方法

问题描述

我正在使用 .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");
     });
 });

标签： angularapi.net-corecorscross-origin-read-blocking

解决方案

在 startup.cs 中添加services.AddCors();ConfigureServices 方法和Configure 方法app.UseCors(x => x.AllowAnyOrigin().AllowAnyHeader().AllowAnyMethod());

推荐阅读