Angular 6 .net Web Api No 'Access-Control-Allow-Origin' header Error

Question

I am developing .net Core Web Api with Vs Code with Angular 6, Vs Studio. The error is as follows; - Failed to load resource: the server responded with a status of 500 (Internal Server Error) - No 'Access-Control-Allow-Origin' header is present on the requested resource. Origin 'http: // localhost: 4200' is therefore not allowed access. The response was HTTP status code 500.

// I added to Startup.cs;
ConfigureServices === >>> services.AddCors ();
Configure === >>>> app.UseCors (bldr => bldr.WithOrigins ("http: // 
localhost: 4200") .WithMethods ("GET", "POST"). AllowAnyHeader ());

The problem is that; The problem is resolved in the get method, the data is retrieved but it does not work in the post method. Thanks in advance.

did you try ` app.UseCors(CorsOptions.AllowAll);` as @Anton suggested in the answer? — Nilesh
– Nilesh, Commented May 31, 2018 at 20:12

Anton Toshik · Accepted Answer · 2018-05-31 15:20:52Z

2

There are multiple ways to solve this, the dotnet core documentation talks about how to handle CORS.

This tends to be an issue only during development so this is my preferred method to solving this issue.

Add CORS rule to the services which allows everything during development

if (_env.IsDevelopment())
{
    services.AddCors(options =>
    {
        options.AddPolicy("AllowAll",
                  p => p.AllowAnyOrigin()
                        .AllowAnyHeader()
                        .AllowAnyMethod()
                        .AllowCredentials());
    });
}

Then add the created rule to the Application Builder:

if (_env.IsDevelopment())
{
    app.UseCors("AllowAll");
}

Alternatevely

There is also a CORS browser extension available for Google Chrome, I am not sure about other browsers.

This is my goto when I don't want to meddle with the request/response headers and is a quick fix for when this issue occurs with other projects not just .net core.

A word of warning though, sometimes this plugin doesn't work.

answered May 31, 2018 at 15:20

Anton Toshik

2,9573 gold badges22 silver badges43 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

Onur İnci Over a year ago

I tried but not. ANGULAR; let headers = new Headers({ 'Content-Type': 'application/json' }); let options = new RequestOptions({ headers: headers }); options.responseType = ResponseContentType.Blob; let body = JSON.stringify(sorguParametreleri); return this.http.post(this.apiURL + "/AGranter/DownloadReport", body, options).map((response: any) => {

Alien · Accepted Answer · 2018-09-03 06:33:43Z

0

It's important to remember that services.AddCors() must come before services.AddMvc() and the same with app.UseCors() and app.UseMvc().

edited Sep 3, 2018 at 6:33

Alien

16k8 gold badges43 silver badges64 bronze badges

answered Sep 3, 2018 at 6:27

Walter Souza

1

Collectives™ on Stack Overflow

Angular 6 .net Web Api No 'Access-Control-Allow-Origin' header Error

2 Answers 2

1 Comment

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

1 Comment

Comments

Your Answer

Sign up or log in

Post as a guest

Related