CORS 策略已阻止从源访问 API 方法答案

【问题标题】：Access to API Method from origin has been blocked by CORS policyCORS 策略已阻止从源访问 API 方法
【发布时间】：2019-09-24 02:25:17
【问题描述】：

我正在使用 .Net Core 构建 API，并使用 Angular Web 应用程序来使用这些 API。两者都使用不同的端口在本地托管。

.Net Core 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 方法时，它会抛出以下错误：

访问 XMLHttpRequest 在 'http://localhost:5000/api/Advertisements' 来自原点 “http://localhost:4444”已被 CORS 策略阻止：请求标头字段内容类型不允许预检响应中的 Access-Control-Allow-Headers。

我在 ConfigureServices 方法中在我的 .Net Core 中添加了 CORS，如下所示：

 services.AddCors(options =>
 {
     options.AddPolicy(MyAllowSpecificOrigins,
     builder =>
     {
         builder.WithOrigins("http://localhost:4444");
     });
 });

【问题讨论】：

你需要在你的 .NET Api 上设置 cors docs.microsoft.com/en-us/aspnet/core/security/…
参考stackoverflow.com/questions/31942037/…
我做了与link 中提到的相同的事情，但同样的错误

标签： angular api .net-core cors cross-origin-read-blocking

【解决方案1】：

在 WebApi.config 中启用 CORS：

var cors = new EnableCorsAttribute("*", "*", "*");
config.EnableCors(cors);

【讨论】：

我正在使用 .Net Core API 应用程序

【解决方案2】：

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

【讨论】：

【解决方案3】：

根据link 中提到的解决方案，以下对我有用。

readonly string MyAllowSpecificOrigins = "_myAllowSpecificOrigins";

public void ConfigureServices(IServiceCollection services)
{ 
    services.AddCors(o => o.AddPolicy(MyAllowSpecificOrigins, builder =>
    {
        builder.AllowAnyOrigin()
               .AllowAnyMethod()
               .AllowAnyHeader();
    }));
}

public void Configure(IApplicationBuilder app, IHostingEnvironment env)
{
    app.UseCors(MyAllowSpecificOrigins);
}

【讨论】：