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

Finding the correct path for ts-loader with webpack version 2.2.1 within a script

Implementing the strictNullCheck flag with msbuild

Utilizing node-json2html, generate individual HTML tables for each record

Acquired this as empty

Troubleshooting HTTP requests in Angular JS when dealing with nested scopes

What steps can I take to resolve the spawn unknown error when using npx create-next-app in Visual Studio Code (VSCode)?

Creating a factory function in TypeScript to generate union types

Exploring the scope and values of radio buttons in Angular

Designing a versatile Angular component for inputting data (Mailing Address)

I am looking to display the results table on the same page after submitting a form to filter content. Can you provide guidance on how to achieve this?

Error: The hook call is invalid and can only be made within the body of a function component in ReactJS

Laravel's Vue component is experiencing issues with loading Axios response data

Store the beginning and ending times in a MySQL database using Sequelize and Node.js

JavaScript function to toggle visibility and scroll back to top of the page

Combining Various Data Types in a Flexible List

What is the process of generating a popup panel without relying on libraries, using JavaScript and CSS?

Making sure to consistently utilize the service API each time the form control is reset within Angular 4

Maintain the visibility of the jQuery dropdown menu even when navigating to a different page within the

Which comes first in AngularJS: ng-include or ng-repeat?

Tips for creating an HTTP only cookie in NestJS