Mozilla dev tab network tabDetails of GET method called to 5001
I forced a problem which I cannot solve since several hours, it's quite common, however none of tips found online helped me.
Everything is on my local PC. Firstly I developed some simple ASP.NET Core WebAPI on Core 2.1 using VS Code and command line. This WebAPI has currently one simple APIController which is hosted on adress: https://localhost:5001/api/customers/1 (when I paste it on browser or postman as result I have some simple Json returned with data of one customer from database). Of course in Startup.cs class I added:
app.UseCors(options =>
options.WithOrigins("http://localhost:4200/")
.AllowAnyMethod()
.AllowAnyHeader());
and I have a filter also:
public class AllowCrossSiteJsonAttribute : ActionFilterAttribute
{
public override void OnActionExecuted(HttpActionExecutedContext actionExecutedContext)
{
if (actionExecutedContext.Response != null)
actionExecutedContext.Response.Headers.Add("Access-Control-Allow-Origin", "*");
base.OnActionExecuted(actionExecutedContext);
}
}
Which is added into every method inside controller and above controller API declaration.
Whole controller code:
namespace BackEnd.Controllers
{
[AllowCrossSiteJson]
[Route("api/[controller]")]
[ApiController]
public class CustomersController : ControllerBase
{
private readonly ICustomersRepository _customersRepository;
public CustomersController(ICustomersRepository customersRepository)
{
_customersRepository = customersRepository;
}
// GET api/customers
[HttpGet]
public async Task<string> Get()
{
var customer = await _customersRepository.GetRandomCustomer();
return customer.FirstName.ToString();
// return new string[] { "value1", "value2" };
}
// GET api/values/5
[AllowCrossSiteJson]
[HttpGet("{id}")]
public async Task<Customer> Get(int id)
{
var customer = await _customersRepository.GetCustomerById(id);
return customer;
}
// POST api/values
[HttpPost]
public async Task Post([FromBody] Customer customer)
{
await _customersRepository.SaveCustomer(customer);
}
// PUT api/values/5
[HttpPut("{id}")]
public void Put(int id, [FromBody] string value)
{
}
// DELETE api/values/5
[HttpDelete("{id}")]
public void Delete(int id)
{
}
}
}
I am using google Chrome browser.
Second - I have separate project developed with Node.Js in Angular 6.1.1. I wanted to do a quick test and call to Web API from Angular app. So Inside AppComponent I added proper httpClient injection and inside OnInit method I added http.get request like this :
this.httpClient.get(`https://localhost:5001/api/customers/${id}`);
My Angular app originally is server by Node.js on adress http://localhost:4200 on my PC. (In the same time both WebAPI and Angular apps are running on my PC - two tabs are opened in the same Google Chrome)
When I launch to http://localhost:4200 and opened Google Chrome Developer tab in console there is an error :
Access to XMLHttpRequest at 'https://localhost:5001/api/customers/1' from origin 'http://localhost:4200' has been blocked by CORS policy: No 'Access-Control-Allow-Origin' header is present on the requested resource.
What I found online is that this problem comes from browser (Postman normally can consume data from WebAPI) I tried to add to mine angular file proxy.conf.json with content:
{
"/api/*": {
"target": "https://localhost:5001",
"secure": false,
"changeOrigin": true
}
}
But it did not help me at all. I have no idea where to look at.
Angular code:
export class AppComponent {
title = 'FrontEnd';
constructor(private apiService: ApiService) { }
ngOnInit(){
console.log('hello');
this.apiService.getCustomerById(1).subscribe((res) => {
console.log(res);
});
}
public getCustomerById(id :number) {
return this.httpClient.get(`https://localhost:5001/api/customers/${id}`);
}
}
