Error received from Http Get request

I am currently facing an issue with my Angular component that is supposed to make a simple HTTP Get request:

this.http.get<any>('http://localhost:80/userservice/login', { params: { username: this.model.username, password: this.model.password } })
        .subscribe(
        data => {
            this.router.navigate(['/register']);
        },
        error => {
            this.alertService.error(error.message);
            this.loading = false;
        });

Additionally, I have a Java webservice that should handle the request:

@GET @Produces( MediaType.APPLICATION_JSON ) @Path("/login")
public Response login(@QueryParam("username") String username, @QueryParam("password") String password)
{
   return Response.status(Response.Status.OK).header("Content-type", "application/json").entity("test").build();
}

Despite the successful request being received and responded to by the Java server, Angular always encounters an error instead of processing the data subscription.

Error-Message: "Http failure response for (unknown url): 0 Unknown Error”

I have verified through breakpoints that the Java Server is correctly receiving and responding to the requests. Any insights on what might be causing this issue would be greatly appreciated. Thank you!

Answer №1

The issue was:

Access-Control-Allow-Origin='*'

This missing header caused Angular to be unable to access the response.

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Change the spread operator in JavaScript to TypeScript functions

I'm struggling to convert a piece of code from Javascript to Typescript. The main issue lies in converting the spread operator. function calculateCombinations(first, next, ...rest) { if (rest.length) { next = calculateCombinations(next, ...res ...

transferring information seamlessly in Ionic using Angular router without the need for navigation

I have a list of names that are displayed, and when I click on any name in the list, it should take me to another page without actually navigating to that path. names.page.html: <ion-content> <ion-list *ngFor='let person of people'&g ...

Displaying data in a list using Ionic's ng-repeat directive

I am trying to hide the ion-row if the value is equal to null. I have tried using the following code but it is not working as expected. <ion-row ng-show="item.Sex != null"> <ion-col col-6> <h5 class="titl ...

Storing the most recent user searches in the browser's local storage

I am currently working on a website that includes a search feature. I would like to keep track of the user's most recent searches. Here are my questions: Would it be advisable to use browser local storage for storing this data? Will performance be af ...

Trigger parent Component property change from Child Component in Angular2 (akin to $emit in AngularJS)

As I delve into teaching myself Angular2, I've encountered a practical issue that would have been easy to solve with AngularJS. Currently, I'm scouring examples to find a solution with Angular2. Within my top-level component named App, there&apos ...

Can you provide the syntax for a generic type parameter placed in front of a function type declaration?

While reviewing a project code recently, I came across some declarations in TypeScript that were unfamiliar to me: export interface SomeInterface<T> { <R>(paths: string[]): Observable<R>; <R>(Fn: (state: T) => R): Observable ...

Using TypeScript to chain observables in a service and then subscribing to them in the component at the end

Working with Platform - Angualar 2 + TypeScript + angularFire2 Within my user.service.ts file, I have implemented the following code to initiate an initial request to a firebase endpoint in order to fetch some path information. Subsequently, I aim to util ...

Ways to update the value within an object in an array stored in a BehaviorSubject?

My initial data is: const menuItems = [{id: 1, active: false}, {id: 2, active: false}] public menuSubject$ = new BehaviorSubject<MenuItem[]>(menuItems); public menu$ = this.menuSubject$.asObservable(); I am attempting to update the element with ...

I need to access the link_id value from this specific actionid and then execute the corresponding function within the Ionic framework

I have a JavaScript code in my TypeScript file. It retrieves the attribute from a span element when it is clicked. I want to store this attribute's value in a TypeScript variable and then call a TypeScript function. Take a look at my ngOnInit method, ...

What causes different errors to occur in TypeScript even when the codes look alike?

type Convert<T> = { [P in keyof T]: T[P] extends string ? number : T[P] } function customTest<T, R extends Convert<T>>(target: T): R { return target as any } interface Foo { x: number y: (_: any) => void } const foo: Foo = c ...

Update your AngularJS to the most recent version of Angular

We are faced with the task of upgrading a legacy MVC website that currently utilizes AngularJs to the latest version of Angular. Surprisingly, our current website only scratches the surface of what Angular has to offer - mainly using it for databinding and ...

Incorporating the Vidyard embedded player within an Angular application

The Vidyard Portal provides an embed code that looks like this: <!-- The script tag should be placed in the head of your page if possible --> <script src="https://play.vidyard.com/embed/v4.js" type="text/javascript" async>&l ...

Utilize the identical element

Incorporating the JwPaginationComponent into both my auction.component and auctiongroup.component has become a necessity. To achieve this, I have created a shared.module.ts: import { NgModule } from '@angular/core'; import { JwPaginationCompon ...

How can we fetch data from the server in Vue 2.0 before the component is actually mounted?

Can anyone help me with this question noted in the title? How can I prevent a component from mounting in <router-view> until it receives data from the server, or how can I fetch the data before the component is mounted in <router-view>? Here a ...

Challenges with Mongo output in the MEAN stack

Recently delving into the MEAN stack Currently following a guide at All necessary installations have been completed. Upon executing mongod, the following output is generated: 2017-12-30T11:38:12.746+0000 I FTDC [initandlisten] Initializing full- ...

Update your code by swapping out two consecutive setTimeout functions with RxJS

When working in an Angular application, there may be a need to execute a method and then trigger two other methods with a time delay between them. The sequence would look like this: Method call -> wait 150 ms -----> second action -> wait 300 ms - ...

Confirm that the attributes of a JSON object align with an Enum

Having a Lambda function that receives a JSON object from the Frontend over HTTPS, I need to perform validation on this object The expected structure of the body should be as follows (Notifications): interface Notifications { type: NotificationType; f ...

Use the CLI to install both the alpha and beta versions of Angular on your system

I'm interested in switching to a version of angular that is currently in active development and testing, like 8.0.0-beta, however I currently have 8.1.0 installed. What is the best way for me to downgrade from version 8.1.0 to 8.0.0-beta? ...

Error code TS2749 is indicating that the identifier 'XXX' is being interpreted as a value instead of a type. Perhaps you intended to use 'typeof XXX' instead

I've encountered a strange issue while running my npm run dev command in my project built with Nuxt.js, which includes Vue.js components. While launching the application, I'm encountering errors related to TypeScript like TS2749: 'About&apos ...

Can you merge two TypeScript objects with identical keys but different values?

These TypeScript objects have identical keys but different properties. My goal is to merge the properties from one object onto the other. interface Stat<T, V> { name: string; description: string; formatValue: (params: { value: V; item: T }) =&g ...