Angular2 Get Request is made twice

Question

I have a problem where Angular2 makes the same request twice. I don't know why, though, because I have only one time a subscribe on the Observable. Here is my code:

My service looks like this:

getProjects(): Observable<Project[]> {
    return this.http.get(this.url)
        .map(this.mapProjects)
        .catch(this.handleError);
}

 private mapProjects(response: Response): any {
    const mappedProjects = response.json();
    return mappedProjects;
}

My component looks like this:

export class ProjectListComponent implements OnInit {

// List of projects
listProjects: Project[] = [];

constructor(private projectListService: ProjectListService) {
 }

public getProjectList() {
    this.projectListService.getProjects()
        .subscribe(
        projects => {
            this.listProjects = projects;
        },
        error => {
            // error handling
        });
}
}

In the network tab of the Chrome Developer Tools I see the request is made two times, once the initiator is zone.js, the other time it just says "Other". Can anyone explain this behaviour?

Answer 1

I think that is preflight request. These are made before the actual request. Your preflight response needs to acknowledge these headers in order for the actual request to work.Once you send this response to the preflight request, the browser will make the actual request. https://developer.mozilla.org/en-US/docs/Web/HTTP/Access_control_CORS#Preflighted_requests