Access to API Method from origin has been blocked by CORS policy

Question

I'm using .Net Core to build API and Angular Web application to consume those APIs. Both are hosted locally with different ports.

.Net Core API: http://localhost:5000

Angular Web App: http://localhost:4444

Here are my Service methods in 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);
  }
}

When I call API methods via Angular App it is throwing following error:

Access to XMLHttpRequest at 'http://localhost:5000/api/Advertisements' from origin 'http://localhost:4444' has been blocked by CORS policy: Request header field content-type is not allowed by Access-Control-Allow-Headers in preflight response.

I added CORS in my .Net Core as below in ConfigureServices method:

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

you need to setup cors on your .NET Api https://learn.microsoft.com/en-us/aspnet/core/security/cors?view=aspnetcore-2.2 — Jason White, May 06 '19 at 12:36
refer https://stackoverflow.com/questions/31942037/how-to-enable-cors-in-asp-net-core — Hien Nguyen, May 06 '19 at 12:40
I did the same thing as mentioned in this [link](https://stackoverflow.com/questions/31942037/how-to-enable-cors-in-asp-net-core) but same error — 55SK55, May 06 '19 at 12:47

score 1 · Answer 1 · answered May 06 '19 at 15:20

1

add services.AddCors(); in ConfigureServices Method and app.UseCors(x => x.AllowAnyOrigin().AllowAnyHeader().AllowAnyMethod()); in Configure method at startup.cs

answered May 06 '19 at 15:20

omid mirzaei

43
7

score 0 · Answer 2 · answered May 06 '19 at 12:39

0

Enable CORS in WebApi.config:

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

answered May 06 '19 at 12:39

Balaj Khan

2,490
2
17
30

I'm using .Net Core API application – 55SK55 May 06 '19 at 12:43

score 0 · Answer 3 · answered May 07 '19 at 10:53

As per solution mentioned in this link, following is working for me.

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);
}

Access to API Method from origin has been blocked by CORS policy

3 Answers3