In my current setup, I have an Angular front-end communicating with a C# webAPI back-end. The Angular application is able to fetch data from external URLs like and json-server --watch db.json. On the other hand, the C# webAPI successfully responds to API calls made through browsers or Postman (using Get method at http://localhost:49566/api/people). However, when the front-end tries to interact with the back-end, it encounters the following error message:
HTTP404: NOT FOUND - The server has not found anything matching the requested URI (Uniform Resource Identifier).
(XHR)OPTIONS - http://localhost:49566/people
I am seeking advice on identifying where the issue lies, whether it is in the front-end implementation or the back-end setup.
Despite referring to various Angular HttpClient examples, I am still facing the same problem - communication works fine with external URLs but fails with my C# webAPI URL.
I attempted to include a post option as well, but that did not offer a solution.
The C# code snippet:
[HttpGet]
public IEnumerable<Person> Get()
{
return SQLiteDataAccess.GetPeople();
}
Here's the code for the Angular data service:
export class DataService {
people: object;
constructor(private http: HttpClient) { }
searchClick(searchString: string) {
return console.log('clicked ' + searchString);
}
getPeople() {
const httpOptions = {
headers: new HttpHeaders({
'Access-Control-Allow-Origin': 'http://localhost:4200/',
'Access-Control-Allow-Methods': 'GET',
'Access-Control-Allow-Headers': '*',
'Content-Type': 'application/json',
'Accept': 'application/json'
})
};
return this.http.get('http://localhost:49566/api/People', httpOptions )
}
}
My objective is to enable the front-end to efficiently fetch data from the back-end so that I can display it on the application.