CODEWITHSUNDEEP
javascriptangularcorsangular-servicesangular-http
Bonzo
Bonzo

Reputation: 443

Access Control Allow Origin issue in Angular 2 http services

I facing issue with fetching data from my laravel server.

This is client side code:

private surveysUrl = 
'http://107.170.59.79/services/public/api/v1/countries';
private headers = new Headers({'Content-Type': 'application/json'});

constructor(private http: Http) { }

getSurveys(): Promise<Survey[]> {
return this.http.get(this.surveysUrl)
   .toPromise()
   .then(response => response.json() as Survey[])
   .catch(this.handleError);
}

But I am receiving as error as:

XMLHttpRequest cannot load {{link set in variable "surveysUrl"}}. The 'Access-Control- Allow-Origin' header has a value '{{Some random link}}' that is not equal to the supplied origin. Origin 'http://localhost:4200' is therefore not allowed access.

How can I fix this error?

PS: I am not allowed to post more than two links so I had to remove links from the error message. I have replaced it with {{ }} to make it readable.

Upvotes: 0

Views: 1065

Answers (1)

Omkar Porje
Omkar Porje

Reputation: 288

If you are using apache then you need to allow the origin access i.e.

Header set Access-Control-Allow-Origin "*"

include this in .htaccess file.

Upvotes: 3

Related Questions