Can't make a cross origin request (CORS) - asp.net

Question

I have enabled CORS in my ASP.NET MVC API, with this code:
public static void Configure(IApplicationBuilder app)
{
app.UseCors("CorsName");
}
public static void ConfigureServices(IServiceCollection services, IConfiguration config)
{
// Configuration and adding Cross-origin resource sharing
services.AddCors(options =>
{
options.DefaultPolicyName = "CorsName";
options.AddPolicy("CorsName", builder =>
{
builder
.WithOrigins(config["AppSettings:CorsOrigin"])
.AllowAnyHeader()
.AllowAnyMethod()
.AllowCredentials()
.AllowAnyOrigin()
.Build();
});
});
}
I try to get data from API, opening the localhost:6320/api/users and it works, I get all the data. Now when I try to get data from Angular 7 app, the data is not loaded and there is an error
"Access to XMLHttpRequest at 'http://localhost:6320/api/users' from
origin 'http://localhost:4200' has been blocked by CORS policy:
Response to preflight request doesn't pass access control check: No
'Access-Control-Allow-Origin' header is present on the requested
resource."
Why there is an error when trying to get data from Angular app if I have enabled CORS?
Here is the AppSettings
"AppSettings": {
"DashboardUrl": "http://127.0.0.1:4200",
"CorsOrigin": "http://localhost:4200"
}
Startup configuration from Startup.cs
public Startup(IHostingEnvironment env, IConfiguration configuration)
{
Configuration = configuration;
HostingEnvironment = env;
}
public void Configure(IApplicationBuilder app, IHostingEnvironment hEnv)
{
InitializeIdentityDbAsync(app.ApplicationServices).Wait();
DiagnosticsStartup.Configure(app, hEnv);
CorsStartup.Configure(app);
IdentityStartup.Configure(app, Configuration);
MVCStartup.Configure(app);
}
public void ConfigureServices(IServiceCollection services)
{
CorsStartup.ConfigureServices(services, Configuration);
services.AddAutoMapper();
services.AddSingleton<IConfiguration>(o => Configuration);
services.AddScoped<IAppContext, AppContext>();
services.AddSingleton<IEmailService, EmailService>();
services.AddScoped<AuthService>();
services.AddScoped<UserService>();
EFStartup.ConfigureServices(services, Configuration);
IdentityStartup.ConfigureServices(services, HostingEnvironment, Configuration);
MVCStartup.ConfigureServices(services);
AutoMapperConfig.RegisterMappings(services.BuildServiceProvider());
}

Answer 1

You're adding origins twice. First, through the .WithOrigins(config["AppSettings:CorsOrigin"]), then through .AllowAnyOrigin(). If only a specific origin is allowed(which I suppose is true considering your configuration), remove the .AllowAnyOrigin() call.
Try with:
services.AddCors(options =>
{
options.AddPolicy("CorsName", builder =>
{
builder
.WithOrigins(config["AppSettings:CorsOrigin"])
.AllowAnyHeader()
.AllowAnyMethod()
.AllowCredentials();
});
});
Check what you're getting from config["AppSettings:CorsOrigin"]. Do you have a key called AppSettings?
Futhermore, it might be(and most probably is) that you're calling app.UseMvc(); before app.UseCors();. Make sure your Configure method has the following order:
public void Configure(IApplicationBuilder app, IHostingEnvironment env)
{
//...
app.UseCors("CorsName");
app.UseMvc();
}

Answer 2

Remove this from your startup class:
services.AddCors(options =>
{
options.AddPolicy("CorsName", builder =>
{
builder
.WithOrigins(config["AppSettings:CorsOrigin"])
.AllowAnyHeader()
.AllowAnyMethod()
.AllowCredentials();
});
});
and in the Configure method try this:
public void Configure(IApplicationBuilder app, IHostingEnvironment env)
{
//...
app.UseCors(builder => {
builder
.WithOrigins(config["AppSettings:CorsOrigin"])
.AllowAnyHeader()
.AllowAnyMethod()
.AllowCredentials();
});
app.UseMvc();
}
If works in this way so you have a problem with the Policy and their assignment to the UseCors method.

Answer 3

you have to enable CORS in front end also.Following is one of the many ways how you can enable CORS in angular .
step 1: Create proxyconfig.json file inside main project folder(beside src and node_modules).
step 2:
{
"/api": {
"target":"url to the server", (eg: "http://45.33.74.207:3000")
"secure": false,
"changeOrigin": true
}
}
save it inside proxyconfig.json file.
step 3:
add --proxy-config proxyconfig.json in start inside scripts object
"start": "ng serve --proxy-config proxyconfig.json"
inside package.json file.
step 4:
save and start the project with
npm start
note: if you start project with (ng serve) it will not work.