CODEWITHSUNDEEP
google-chromeangularcors
ysfiqbl
ysfiqbl

Reputation: 396

CORS issue with Angular 2 in Chrome normal mode

I am running an Angular 2 application generated using angular-cli. I am using the code below to make a HTTP GET request to a server which allows cross origin requests. 

getItems(): Promise<Items[]> {      
    return this.http.get(this.url).toPromise().then(response => {
        console.log(response);
        response.json() as Item[];
    }).catch(this.handleError);
}

The above function gets called when a certain page loads to retrieve a list of items. When I test the application in Chrome Incognito mode the data is fetched and logs the received response. But when I try it out in normal mode I get the error below.

XMLHttpRequest cannot load http://10.20.10.16/api/items. Request header field x-xsrf-token is not allowed by Access-Control-Allow-Headers in preflight response.

I am using ng serve to run the Angular 2 application.

I tried the same HTTP GET request using the jQuery code below and that works in Chrome normal mode. 

$(document).ready(function(){                   
    $.ajax('http://10.20.10.16/api/items').done(function (data) {
        console.log(data)
    }).fail(function() {
        console.log('Error');
    }).always(function() {
        console.log('Completed');
    });
});

I thought it was a cache issue so I cleared the cache for the last two days which is when I started working on this application.

I also tried the Angular 2 application in Internet Explorer and it works fine without any CORS errors.

It seems to be a caching issue but I do not want to clear my entire cache. How can I fix this?

Upvotes: 2

Views: 1676

Answers (1)

ysfiqbl
ysfiqbl

Reputation: 396

I was able to solve the problem by restarting the browser and restoring its history. I also removed everything related localhost beforehand.

I guess it could have worked by clearing the browser history but I didn't want to do that.

Upvotes: 1

Related Questions