Why I'm having CORS error when calling an API

Question

I'm using Angular in frontend and C# as my backend, I got this error when I try to edit fields and save it:

Access to XMLHttpRequest at 'http://192.168.220.14:81/api/registry' from origin 'http://artc.tj' has been blocked by CORS policy: No 'Access-Control-Allow-Origin' header is present on the requested resource.

PUT http://192.168.220.14:81/api/reg polyfills-es2015.23e79c711e3c227d781f.js:1 PUT http://192.168.220.14:81/api/registry net::ERR_FAILED

Error Scrinshot

Startup.cs:

 public void ConfigureServices(IServiceCollection services)
 {
     //CORS
     services.AddCors(options =>
     {
         options.AddPolicy(MyAllowSpecificOrigins,
         builder =>
         {
             builder.WithOrigins("http://localhost",
                                 "http://localhost:4200",
                                 "http://artc.tj",
                                 "http://192.168.220.14")
                                    .AllowAnyMethod()
                                    .AllowAnyHeader()
                                    .AllowCredentials();
         });
     });
  }

What’s the HTTP status code of the response? You can use the Network pane in browser devtools to check. Is it a 4xx or 5xx error rather than a 200 OK success response? — sideshowbarker, Mar 05 '20 at 05:49
have you added `app.UseCors(MyAllowSpecificOrigins); ` in configure method? — Kaushik, Mar 05 '20 at 06:19
I guess you are registering your middleware too late. see https://stackoverflow.com/a/60038513/5517088 — Kevin, Mar 05 '20 at 09:00
Does this answer your question? [ASP.NET 5/Core/vNext CORS not working even if allowing pretty much everything](https://stackoverflow.com/questions/37138196/asp-net-5-core-vnext-cors-not-working-even-if-allowing-pretty-much-everything) — Kevin, Mar 05 '20 at 09:01

score 1 · Answer 1 · answered Mar 05 '20 at 06:26

Make sure you use the Cors() in your Configure method.

Startup.cs

public class Startup
{
   //...
   readonly string MyAllowSpecificOrigins = "_myAllowSpecificOrigins";

   public void ConfigureServices(IServiceCollection services)
   {
      //...
         services.AddCors(options =>
         {
             options.AddPolicy(MyAllowSpecificOrigins,
             builder =>
             {
                 builder.WithOrigins("http://localhost:4200")
                     .AllowAnyHeader()
                     .AllowAnyMethod()
                     .AllowAnyOrigin();
             });
         });
      //...
   }

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

P.S. Also make sure to include withCredentials: false in your client request httpOptions

score 0 · Answer 2 · answered Mar 05 '20 at 08:50

I think you're missing the header when sending the request from Angular side. Here's what I normally do:

Startup.cs

public void ConfigureServices(IServiceCollection services)
{
     services.AddCors(options =>
     {
         options.AddPolicy("Default", policy =>
         {
             policy.AllowAnyOrigin()
                   .AllowAnyHeader()
                   .AllowAnyMethod();
         });
     });
}

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

Angular Request:

callAPI() {
   return this.httpClient
            .get(API_URL, {headers: {'Access-Control-Allow-Origin' : '*'}});
}

The client doesn't decide who the server gives access to. The `Access-Control-Allow-Origin` is a response header sent from the server — Kevin, Mar 05 '20 at 12:38

Sanjay Lohar · Answer 3 · 2020-03-05T08:48:39.647

-1

You don't. The server you are making the request to has to implement CORS to grant JavaScript from your website access. Your JavaScript can't grant itself permission to access another website.

Use a CORS extension from web store of chrome browser.

Hope so this might change your perceotion

edited Mar 05 '20 at 08:48

answered Mar 05 '20 at 06:16

Sanjay Lohar

520
2
8

Why I'm having CORS error when calling an API

3 Answers3