I'm working on the frontend of a web application using Angular. When I send a GET request with Postman, it works properly, but if I send the same request from the frontend, it gives an error. Could you please give me a hint? Thank you!
This is the error I get:
core.js:6157 ERROR DOMException: Failed to execute 'open' on 'XMLHttpRequest': Invalid URL
at http://localhost:4200/polyfills.js:12125:35
at XMLHttpRequest.proto.<computed> [as open] (http://localhost:4200/polyfills.js:10714:52)
at Observable._subscribe (http://localhost:4200/vendor.js:122729:17)
at Observable._trySubscribe (http://localhost:4200/vendor.js:24049:25)
at Observable.subscribe (http://localhost:4200/vendor.js:24035:22)
at DoOperator.call (http://localhost:4200/vendor.js:132235:23)
at Observable.subscribe (http://localhost:4200/vendor.js:24030:31)
at CatchOperator.call (http://localhost:4200/vendor.js:25097:23)
at Observable.subscribe (http://localhost:4200/vendor.js:24030:31)
at DoOperator.call (http://localhost:4200/vendor.js:132235:23)
This is part of my code:
getAllUsers(page: number, size: number, sortBy: string, sortDirection: string): Observable<IUserResponseFormatted> {
const sort = [sortBy, sortDirection].toString();
const currentUser: IUser = this.lsService.getItem('currentUser') as IUser;
const token = "Bearer " + currentUser.accessToken;
const headers = new HttpHeaders()
.set('Authorization', token);
return this.http.get<IUserResponse>(`${environment.SECURITY_URL}user?page=${page}&size=${size}&sort=${sort}`, {headers})
.pipe(
map((response: IUserResponse): IUserResponseFormatted => {
const users: IUser[] = response._embedded.user.map((user: IUser): IUser => {
return user;
});
const pageData = response.page;
return { users, pageData }
}),
catchError(this.handleError)
);
}