Failed to connect with REST web service

Question

I have one web service in jersey that deploy on appache server, and I'm trying to connect that server but I get the following error :

Failed to load http://192.168.1.200:8199/CheckinnWeb/webapi/myresource/query: No 'Access-Control-Allow-Origin' header is present on the requested resource. Origin 'http://localhost:4200' is therefore not allowed access.

my service.ts file code is below

  getlogin(): Observable<ILogin[]> { return this._http .get(this._loginurl, this.headers) .map((response: Response) => <ILogin[]> response.json()) .catch(this.handleError); } 

this is my server url

_loginurl='http://192.168.1.200:8199/CheckinnWeb/webapi/myresource/'+this.encodedString;

please help me to solve this..thank you!!

Answer 1

Try This

 getlogin(): Promise<ILogin[]> {
    return this.http.get(this._loginurl)
        .toPromise().then(response => <ILogin[]>response.json().data)
        .catch(this.handleError);
}

Answer 2

The error clearly says:

No 'Access-Control-Allow-Origin' header is present on the requested resource.

This is not an error with angular2 itself. But it's more to do with your CORS configuration on server side.

You have to set Access-Control-Allow-Origin header in your response from your service. You can set something like below which says you basically allow any resource:

Access-Control-Allow-Origin: *

Answer 3

try this:

import {Headers} from "@angular/http";

let headers=new Headers({ 
    });
    headers.append('Accept', 'application/json');
    headers.append('Access-Control-Allow-Origin','*');

  getlogin(): Promise<ILogin[]> {
    return this.http.get(this._loginurl,{headers:headers}))
        .toPromise().then(response => <ILogin[]>response.json().data)
        .catch(this.handleError);
}