REST call works with axios but not with HttpClient in an Angular 5 project
up vote
0
down vote
favorite
Service.ts code
import { Injectable } from '@angular/core';
import { HttpClient } from '@angular/common/http';
@Injectable({
providedIn: 'root'
})
export class ClientService {
constructor(private http: HttpClient) { }
getClients() {
return this.http.get<any>('http://localhost:8080/admin-api/client?count=15&page=0&q=', { withCredentials: true })
}
}Component.ts code
import { Component, OnInit } from '@angular/core';
import { LazyLoadEvent } from 'primeng/api'
import { ClientService } from '../../services/client.service';
@Component({
selector: 'app-client',
templateUrl: './client.component.html',
styleUrls: ['./client.component.css']
})
export class ClientComponent implements OnInit {
constructor(private clientService: ClientService) { }
ngOnInit() {
this.loading = true
this.clientService.getClients().subscribe(data => {
console.log(data)
}, error => {
console.log(error)
})
}
}The error I get when I run this
I don't understand why the same request can succeed using axios but not with the HttpClient in Angular.
node.js angular typescript axios angular-httpclient
asked Nov 21 at 11:24
Sameer Basil
124
add a comment |
up vote
0
down vote
favorite
Service.ts code
import { Injectable } from '@angular/core';
import { HttpClient } from '@angular/common/http';
@Injectable({
providedIn: 'root'
})
export class ClientService {
constructor(private http: HttpClient) { }
getClients() {
return this.http.get<any>('http://localhost:8080/admin-api/client?count=15&page=0&q=', { withCredentials: true })
}
}Component.ts code
import { Component, OnInit } from '@angular/core';
import { LazyLoadEvent } from 'primeng/api'
import { ClientService } from '../../services/client.service';
@Component({
selector: 'app-client',
templateUrl: './client.component.html',
styleUrls: ['./client.component.css']
})
export class ClientComponent implements OnInit {
constructor(private clientService: ClientService) { }
ngOnInit() {
this.loading = true
this.clientService.getClients().subscribe(data => {
console.log(data)
}, error => {
console.log(error)
})
}
}The error I get when I run this
I don't understand why the same request can succeed using axios but not with the HttpClient in Angular.
node.js angular typescript axios angular-httpclient
asked Nov 21 at 11:24
Sameer Basil
124
Seems CORS issue with backend API's
– Pardeep Jain
Nov 21 at 11:25
1
You have CORS error, read some other questions about this error.
– onetwo12
Nov 21 at 11:26
But the request works with axios, that is not possible if there is a CORS issue with the back end right?
– Sameer Basil
Nov 21 at 12:08
add a comment |
up vote
0
down vote
favorite
up vote
0
down vote
favorite
Service.ts code
import { Injectable } from '@angular/core';
import { HttpClient } from '@angular/common/http';
@Injectable({
providedIn: 'root'
})
export class ClientService {
constructor(private http: HttpClient) { }
getClients() {
return this.http.get<any>('http://localhost:8080/admin-api/client?count=15&page=0&q=', { withCredentials: true })
}
}Component.ts code
import { Component, OnInit } from '@angular/core';
import { LazyLoadEvent } from 'primeng/api'
import { ClientService } from '../../services/client.service';
@Component({
selector: 'app-client',
templateUrl: './client.component.html',
styleUrls: ['./client.component.css']
})
export class ClientComponent implements OnInit {
constructor(private clientService: ClientService) { }
ngOnInit() {
this.loading = true
this.clientService.getClients().subscribe(data => {
console.log(data)
}, error => {
console.log(error)
})
}
}The error I get when I run this
I don't understand why the same request can succeed using axios but not with the HttpClient in Angular.
node.js angular typescript axios angular-httpclient
asked Nov 21 at 11:24
Sameer Basil
124
Service.ts code
import { Injectable } from '@angular/core';
import { HttpClient } from '@angular/common/http';
@Injectable({
providedIn: 'root'
})
export class ClientService {
constructor(private http: HttpClient) { }
getClients() {
return this.http.get<any>('http://localhost:8080/admin-api/client?count=15&page=0&q=', { withCredentials: true })
}
}Component.ts code
import { Component, OnInit } from '@angular/core';
import { LazyLoadEvent } from 'primeng/api'
import { ClientService } from '../../services/client.service';
@Component({
selector: 'app-client',
templateUrl: './client.component.html',
styleUrls: ['./client.component.css']
})
export class ClientComponent implements OnInit {
constructor(private clientService: ClientService) { }
ngOnInit() {
this.loading = true
this.clientService.getClients().subscribe(data => {
console.log(data)
}, error => {
console.log(error)
})
}
}The error I get when I run this
I don't understand why the same request can succeed using axios but not with the HttpClient in Angular.
import { Injectable } from '@angular/core';
import { HttpClient } from '@angular/common/http';
@Injectable({
providedIn: 'root'
})
export class ClientService {
constructor(private http: HttpClient) { }
getClients() {
return this.http.get<any>('http://localhost:8080/admin-api/client?count=15&page=0&q=', { withCredentials: true })
}
}import { Injectable } from '@angular/core';
import { HttpClient } from '@angular/common/http';
@Injectable({
providedIn: 'root'
})
export class ClientService {
constructor(private http: HttpClient) { }
getClients() {
return this.http.get<any>('http://localhost:8080/admin-api/client?count=15&page=0&q=', { withCredentials: true })
}
}import { Component, OnInit } from '@angular/core';
import { LazyLoadEvent } from 'primeng/api'
import { ClientService } from '../../services/client.service';
@Component({
selector: 'app-client',
templateUrl: './client.component.html',
styleUrls: ['./client.component.css']
})
export class ClientComponent implements OnInit {
constructor(private clientService: ClientService) { }
ngOnInit() {
this.loading = true
this.clientService.getClients().subscribe(data => {
console.log(data)
}, error => {
console.log(error)
})
}
}import { Component, OnInit } from '@angular/core';
import { LazyLoadEvent } from 'primeng/api'
import { ClientService } from '../../services/client.service';
@Component({
selector: 'app-client',
templateUrl: './client.component.html',
styleUrls: ['./client.component.css']
})
export class ClientComponent implements OnInit {
constructor(private clientService: ClientService) { }
ngOnInit() {
this.loading = true
this.clientService.getClients().subscribe(data => {
console.log(data)
}, error => {
console.log(error)
})
}
}node.js angular typescript axios angular-httpclient
node.js angular typescript axios angular-httpclient
asked Nov 21 at 11:24
Sameer Basil
124
asked Nov 21 at 11:24
Sameer Basil
124
edited Nov 21 at 11:26
asked Nov 21 at 11:24
Sameer Basil
124
asked Nov 21 at 11:24
Sameer Basil
124
asked Nov 21 at 11:24
Sameer Basil
124
124
Seems CORS issue with backend API's
– Pardeep Jain
Nov 21 at 11:25
1
You have CORS error, read some other questions about this error.
– onetwo12
Nov 21 at 11:26
But the request works with axios, that is not possible if there is a CORS issue with the back end right?
– Sameer Basil
Nov 21 at 12:08
add a comment |
Seems CORS issue with backend API's
– Pardeep Jain
Nov 21 at 11:25
1
You have CORS error, read some other questions about this error.
– onetwo12
Nov 21 at 11:26
But the request works with axios, that is not possible if there is a CORS issue with the back end right?
– Sameer Basil
Nov 21 at 12:08
Seems CORS issue with backend API's
– Pardeep Jain
Nov 21 at 11:25
Seems CORS issue with backend API's
– Pardeep Jain
Nov 21 at 11:25
1
1
You have CORS error, read some other questions about this error.
– onetwo12
Nov 21 at 11:26
You have CORS error, read some other questions about this error.
– onetwo12
Nov 21 at 11:26
But the request works with axios, that is not possible if there is a CORS issue with the back end right?
– Sameer Basil
Nov 21 at 12:08
But the request works with axios, that is not possible if there is a CORS issue with the back end right?
– Sameer Basil
Nov 21 at 12:08
add a comment |
active
oldest
votes
active
oldest
votes
active
oldest
votes
active
oldest
votes
active
oldest
votes
draft saved
draft discarded
Thanks for contributing an answer to Stack Overflow!
- Please be sure to answer the question. Provide details and share your research!
But avoid …
- Asking for help, clarification, or responding to other answers.
- Making statements based on opinion; back them up with references or personal experience.
To learn more, see our tips on writing great answers.
Some of your past answers have not been well-received, and you're in danger of being blocked from answering.
Please pay close attention to the following guidance:
- Please be sure to answer the question. Provide details and share your research!
But avoid …
- Asking for help, clarification, or responding to other answers.
- Making statements based on opinion; back them up with references or personal experience.
To learn more, see our tips on writing great answers.
draft saved
draft discarded
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
StackExchange.ready(
function () {
StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fstackoverflow.com%2fquestions%2f53411068%2frest-call-works-with-axios-but-not-with-httpclient-in-an-angular-5-project%23new-answer', 'question_page');
}
);
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Seems CORS issue with backend API's
– Pardeep Jain
Nov 21 at 11:25
1
You have CORS error, read some other questions about this error.
– onetwo12
Nov 21 at 11:26
But the request works with axios, that is not possible if there is a CORS issue with the back end right?
– Sameer Basil
Nov 21 at 12:08