Encountered an issue when attempting to establish a connection with the REST

Question

Encountered an issue when attempting to establish a connection with the REST

I am encountering an issue with connecting to a web service deployed on an Apache server using Jersey. The error message I receive is:

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.

Here is the code from my service.ts file:

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

This is the URL of my server:

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

Please assist me in resolving this issue. Thank you!

javascript angularjs typescript angularjs-directive

Answer 1

Answer №1

Give this a shot

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

Answer 2

Give this a shot

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

Answer 3

Answer №2

The issue is clearly stated in the error message:

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

This issue does not originate from angular2 itself, but rather from your server's CORS configuration.

To resolve this, you need to ensure that your service includes the Access-Control-Allow-Origin header in its response. You can set it to allow access from any resource with the following line of code:

Access-Control-Allow-Origin: *

Answer 4

The issue is clearly stated in the error message:

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

This issue does not originate from angular2 itself, but rather from your server's CORS configuration.

To resolve this, you need to ensure that your service includes the Access-Control-Allow-Origin header in its response. You can set it to allow access from any resource with the following line of code:

Access-Control-Allow-Origin: *

Answer 5

Answer №3

give this a shot:

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

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

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

Answer 6

give this a shot:

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

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

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

Encountered an issue when attempting to establish a connection with the REST

Answer №1

Answer №2

Answer №3

Similar questions

Issues with GTM web tracking due to conflicts with the jQuery submit function when used in an AngularJS form

Regularly check in with the server via ajax calls

The module './installers/setupEvents' could not be located within Electron-Winstaller

Need help setting parsed values on jQuery Autocomplete after Keyup event?

unable to retrieve the response from a POST request sent to a node server

Updating the quantity of a product within a state in React allows for easy manipulation of that

When a function is transferred from a parent component to a child component's Input() property, losing context is a common issue

Mistakes that occur while trying to expand a base class to implement CRUD functionality

The combination of Heroku (Cedar) with Node, Express, and Jade is causing issues with the client-side javascript files in a subdirectory. While they work fine locally with foreman and

Exploring the concept of type identification in interpreted dynamic languages

Not successfully integrating an angular component

Tips for adjusting image size to take up only half of the screen in NextJS

Having trouble with errors when trying to implement react-router-v6 with typescript

Issues with integrating VUE frontend with PHP backend and API

Google Analytics does not include e-commerce tracking capabilities

Having trouble retrieving exchange rates from the state in React after making an API call

Is there a way to access an SD card by clicking on an HTML link using JavaScript?

Setting up Twitter authentication using the `consumerKey` with EveryAuth in a web application built on Node, Angular,

Tips on increasing the width of the 'select' option once the user decides to make a selection

Node.js Link Management: A Guide to Updating Links