After thorough research on Stack Overflow, I can confidently say that the issue is not with my code. However, my REST APIs are being called twice.
Here is a snippet of my code:
Component:
export class Component {
constructor(private _nService: NService) {
this.categoryList = this._nService.getCategories();
this.getMessage();
}
getMessage() {
console.log('inside getMessagecomponent');
this._nService.getNotifications().subscribe(notifications => {
console.log('Calling Service...');
});
}
}
Service:
@Injectable()
export class NService {
constructor(private http: Http) { }
getNotifications() {
console.log('inside getNotification service');
return this.http.get(URL)
.map((res: Response) => res.json());
}
}
I have added console.log statements in both the component and service to track whether the method is being called from other places or getting called twice.
Surprisingly, the console.log statements in both the component and service are only triggered once. However, the REST APIs are still being called twice.
- I attempted to use .share() but it did not resolve the issue.
- Unsubscribing from the call also did not work.
The sequence of the console.log outputs is as follows:
- inside getMessagecomponent component
- inside getNotification service
- Calling Service...
PS: This duplication of API calls is occurring across all APIs in my project.
https://i.sstatic.net/CKgpe.jpg
Headers:
Request 1:
----------------
Access-Control-Allow-Credentials:true
Access-Control-Allow-Headers:Content-Type, Accept, X-Requested-With, remember-me, x-dd-cust, x-dd-apitoken
Access-Control-Allow-Methods:POST, GET, PUT, OPTIONS, DELETE
Access-Control-Allow-Origin:http://localhost:8425
Access-Control-Max-Age:3600
Cache-Control:no-cache, no-store, max-age=0, must-revalidate
Content-Type:application/json;charset=UTF-8
Date:Mon, 20 Mar 2017 07:00:40 GMT
Expires:0
Pragma:no-cache
Transfer-Encoding:chunked
X-Application-Context:application:dev:8085
X-Content-Type-Options:nosniff
X-Frame-Options:DENY
X-XSS-Protection:1; mode=block
Response 1:
---------------
Accept:application/json, text/plain, */*
Accept-Encoding:gzip, deflate, sdch, br
Accept-Language:en-US,en;q=0.8
Cache-Control:max-age=0
Connection:keep-alive
Content-Type:application/json
Host:localhost:8085
Origin:http://localhost:8425
Referer:http://localhost:8425/dashboard
User-Agent:Mozilla/5.0 (Windows NT 6.1; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/56.0.2924.87 Safari/537.36
x-dd-apitoken:TOKEN
x-dd-cust:name
Request 2:
--------------
Access-Control-Allow-Credentials:true
Access-Control-Allow-Headers:Content-Type, Accept, X-Requested-With, remember-me, x-dd-cust, x-dd-apitoken
Access-Control-Allow-Methods:POST, GET, PUT, OPTIONS, DELETE
Access-Control-Allow-Origin:http://localhost:8425
Access-Control-Max-Age:3600
Cache-Control:no-cache, no-store, max-age=0, must-revalidate
Content-Type:application/json;charset=UTF-8
Date:Mon, 20 Mar 2017 07:00:40 GMT
Expires:0
Pragma:no-cache
Transfer-Encoding:chunked
X-Application-Context:application:dev:8085
X-Content-Type-Options:nosniff
X-Frame-Options:DENY
X-XSS-Protection:1; mode=block
Response 2:
------------
Accept:application/json, text/plain, */*
Accept-Encoding:gzip, deflate, sdch, br
Accept-Language:en-US,en;q=0.8
Cache-Control:max-age=0
Connection:keep-alive
Content-Type:application/json
Host:localhost:8085
Origin:http://localhost:8425
Referer:http://localhost:8425/dashboard
User-Agent:Mozilla/5.0 (Windows NT 6.1; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/56.0.2924.87 Safari/537.36
x-dd-dd:TOKEN
x-dd-cust:name
UPDATE
Upon checking the developer console, I noticed that it is not an OPTIONS request as there are two separate GET requests visible in the network tab.