http request work in postman but not in browser - http

Question

I am able to send post and get request from postman but when i actually send that request from browser it is not able to fetch records and in console shows error "body: {error: "Collection 'undefined' not found"}".
tried for both Get and Post requests they both provide the data in response in POSTMAN, but in browser it does not work.shows error "body: {error: "Collection 'undefined' not found"}".
in same project at different place i am also using in-memory-data-base, to which i am able to make /GETRequest and recieve the data in response.
homepage.ts:=============
public AllItem: AllItems[] ;
getAllItems(): void {
console.log('AA');
this.itemService.getAllItems() //(this.AllItems)
.subscribe(AllItem => this.AllItem = AllItem );
console.log(this.AllItem);
console.log('EE');
}
item.Service.ts:===============
private itemsUrl = 'api/items'; // URL to web api
private allItemsUrl = 'http://*************.azurewebsites.net/items';
getAllItems(): Observable<AllItems[]>{
console.log('CC');
return this.http.get<AllItems[]>(this.allItemsUrl)
.pipe(
tap(_ => this.log('fetched heroes')),
catchError(this.handleError<AllItems[]>('getHeroes', []))
);
}
// this get request work properly and gives response data from in-memoery-db
getItems(): Observable<Item[]> {
return this.http.get<Item[]>(this.itemsUrl)
.pipe(
tap(_ => this.log('fetched heroes')),
catchError(this.handleError<Item[]>('getHeroes', []))
);
}
in POSTMAN it gives data as
{
"items": [
{
"category": "Drink",
"item": "Coffee",
"price": "5$"
}]
}
in Browser console
core.js:15724 ERROR
body: {…}, url: "http://**********.azurewebsites.net/items", headers: HttpHeaders, status: 404, statusText: "Not Found"}
body: {error: "Collection 'undefined' not found"}
headers: HttpHeaders {normalizedNames: Map(0), lazyUpdate: null, lazyInit: ƒ}
status: 404
statusText: "Not Found"
url: "http://*************.azurewebsites.net/items"
__proto__: Object

Answer 1

Got the solution for this, Actually i was using in-memory-web-api at some other places in same project,
Not found collection error suggest that you have used angular-in-memory-web-api before. You need to remove everything related to that from your project, so that you are able to use external api and db.
"InMemoryWebApiModule.forRoot(InMemoryDataService)"
Angular in-memory-web-api, it replaces the HttpClient module's HttpBackend SO it needs to be removed first before using actual server and DB
After this i faced another issue that Response to preflight request doesn't pass access control check: No 'Access-Control-Allow-Origin' header is present on the requested resource.
For this we need to use following in our node server in Azure.
var cors = require('cors');
app.use(cors({origin: '*'}));