I have implemented an asp.net core web api and the endpoints seems to work fine. I am running the webapi via its local webserver. I am able to access the api via postman as well. I have implemented an Angular 8 application. I am getting an unknown error while trying to access the api endpoint. I initially thought it is cors issue and enabled cors in my controller but still facing the same problem. Could somebody tell me what the problem could be
The webapi ur is http://localhost:56676/api/customers and the angular application url is http://localhost:4200/customer
The error message that is am getting is
Access to XMLHttpRequest at 'http://localhost:56676/api/customers/' 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.
Angular code
CustomerComponent
ngOnInit() {
this.customers$ = this.customerService.getCustomers()
.pipe(
catchError(err => {
this.errorMessage = err;
return EMPTY;
})
)
}
Customer interface
interface ICustomer {
customerId : string;
companyName : string;
contactName : string;
contactTitle : string;
address : string;
city : string;
region : string;
postalCode : string;
country : string;
phone : string;
fax : string;
}
CustomerService
export class CustomerService {
constructor(private smartTrCommonService: SmartTrCommonService) { }
getCustomers() : Observable<ICustomer[]>{
return this.smartTrCommonService.httpGet('/api/customers/');
}
}
CommonService
export class SmartTrCommonService {
webApplication = this.getApiLocation();
private getApiLocation() {
const port = location.port ? ':56676' : '';
return location.protocol + '//' + location.hostname + port;
}
constructor(private httpClient: HttpClient) { }
httpGet(url: string): Observable<any> {
return this.httpClient.get(this.webApplication + url, httpPostOptions)
.pipe(map((response: Response) => {
return response;
}), catchError(error => {
this.onError(error);
return Promise.reject(error);
}));
}
}
Asp.Net core
[EnableCors("AllowOrigin")]
[Route("api/[controller]")]
[ApiController]
public class CustomersController : ControllerBase
{
ICustomerRepository _customersRepository;
public CustomersController(ICustomerRepository customersRepository)
{
_customersRepository = customersRepository;
}
[HttpGet]
[EnableCors("AllowOrigin")]
public async Task<IActionResult> Get()
{
try
{
var customers = await _customersRepository.GetAllCustomers();
if (customers == null)
{
return NotFound();
}
return Ok(customers);
}
catch
{
return BadRequest();
}
}
}
startup.cs
public void ConfigureServices(IServiceCollection services)
{
services.AddMvc().SetCompatibilityVersion(CompatibilityVersion.Version_2_2);
services.AddSwaggerGen(c =>
{
});
services.AddDbContext<NorthwindContext>(item => item.UseSqlServer(Configuration.GetConnectionString("NorthwindDBConnection")));
services.AddCors(c =>
{
c.AddPolicy("AllowOrigin", options => options.WithOrigins("http://localhost:4200"));
});
var mappingConfig = new MapperConfiguration(mc =>
{
mc.AddProfile(new MappingProfile());
});
IMapper mapper = mappingConfig.CreateMapper();
services.AddSingleton(mapper);
services.AddScoped<ICustomerRepository, CustomerRepository>();
}
// This method gets called by the runtime. Use this method to configure the HTTP request pipeline.
public void Configure(IApplicationBuilder app, IHostingEnvironment env)
{
if (env.IsDevelopment())
{
app.UseDeveloperExceptionPage();
}
else
{
// The default HSTS value is 30 days. You may want to change this for production scenarios, see https://aka.ms/aspnetcore-hsts.
app.UseHsts();
}
app.UseCors(options => options.WithOrigins("http://localhost:4200"));
app.UseCors("MyPolicy");
app.UseHttpsRedirection();
app.UseSwagger();
app.UseSwaggerUI(c => { c.SwaggerEndpoint("/swagger/v1/swagger.json", "API name"); });
app.UseMvc();
}
Updated startup file
public Startup(IConfiguration configuration)
{
Configuration = configuration;
}
public IConfiguration Configuration { get; }
// This method gets called by the runtime. Use this method to add services to the container.
public void ConfigureServices(IServiceCollection services)
{
services.AddMvc().SetCompatibilityVersion(CompatibilityVersion.Version_2_2);
services.AddSwaggerGen(c =>
{
});
services.AddDbContext<NorthwindContext>(item => item.UseSqlServer(Configuration.GetConnectionString("NorthwindDBConnection")));
services.AddCors(options =>
{
options.AddPolicy("AllowOrigin",
builder =>
{
builder.WithOrigins("http://localhost:4200/")
.AllowAnyHeader()
.AllowAnyMethod();
// .AllowCredentials();
});
});
var mappingConfig = new MapperConfiguration(mc =>
{
mc.AddProfile(new MappingProfile());
});
IMapper mapper = mappingConfig.CreateMapper();
services.AddSingleton(mapper);
services.AddScoped<ICustomerRepository, CustomerRepository>();
}
// This method gets called by the runtime. Use this method to configure the HTTP request pipeline.
public void Configure(IApplicationBuilder app, IHostingEnvironment env)
{
app.UseOptions();
if (env.IsDevelopment())
{
app.UseDeveloperExceptionPage();
}
else
{
// The default HSTS value is 30 days. You may want to change this for production scenarios, see https://aka.ms/aspnetcore-hsts.
app.UseHsts();
}
app.UseCors("AllowOrigin");
app.UseHttpsRedirection();
app.UseSwagger();
app.UseSwaggerUI(c => { c.SwaggerEndpoint("/swagger/v1/swagger.json", "API name"); });
app.UseMvc();
}
}
http://4200:locahost/, I think you meanhttp://locahost:4200/? – msanford.subscribe()... Is it an async pipe in your template? My 0,02$ I'd just keep it simple: angular.io/guide/http – msanford