0

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.

eko
  • 39,722
  • 10
  • 72
  • 98
Bonzo
  • 427
  • 2
  • 10
  • 28
  • 2
    Possible duplicate of [How to make CORS-enabled HTTP requests in Angular 2?](https://stackoverflow.com/questions/36768418/how-to-make-cors-enabled-http-requests-in-angular-2) – eko Jun 02 '17 at 07:33
  • It's only *http://49.248.126.222:8282/* that has access, you need to change that to allow your localhost, or then allow all. This has to be done server side, not Angular as you asked below. – AT82 Jun 02 '17 at 08:49
  • 1
    Thanks @AJT_82. I will make the changes. – Bonzo Jun 02 '17 at 09:26

1 Answers1

2

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.

Omkar Porje
  • 278
  • 1
  • 5
  • Thanks for the suggestion but can you please let me know if I can handle it from Angular. – Bonzo Jun 02 '17 at 08:39
  • Hi @RumSmeagolRun this is something to be done at server side. (i.e the one who is creating the API end point for you) – Omkar Porje Jun 02 '17 at 10:56