Angular jsonp.get request was denied despite receiving a status code of 200 indicating success

I have been attempting to access my basic web API created in Jersey, which returns the following data:

[
    {
        "id": 1,
        "name": "Facebook",
        "userName": "<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="f4959697b49399959d98da979b99">[email protected]</a>",
        "password": "Qwerty@123"
    }
]

The JSONP request I am using appears as follows:

this.jsonp.get('http://localhost:8080/api/rest/domains?callback=JSONP_CALLBACK')
            .toPromise()
            .then(response => console.log("Success: " + response),
                err => console.log("Failed: " + err));

Despite this, I am seeing the following message in the console output:

Failed: Response with status: 200 Ok for URL: http://localhost:8080/DomainServiceApi/rest/domains?callback=ng_jsonp.__req0.finished

I cannot seem to pinpoint the issue.

EDIT: Thankfully, I managed to resolve my problem. By reverting back to using the http.get method and eliminating unnecessary in-memory web API imports, I received an error suggesting that "Access-Control-Allow-Origin" should be included in the response headers on the server side. After adding this header to my Jersey Web API, everything began functioning correctly.

If you are utilizing Jersey, refer to How to add headers in Jersey response for guidance.

Answer №1

When the server sends a GET response with status code 200, it means that the request was successful. However, there seems to be an issue with the formatting of the JSON data in the response. Could you take a look at the JSON request to ensure it is properly formatted? Please share the JSON here and let me know if it resolves the issue.

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

What methods does Angular use to manipulate the DOM?

Picture this scenario... <ul> <li *ngFor="random"></li> </ul> ...with a MutationObserver monitoring its changes: observer.observe(this.el, { characterData: true, subtree: true }); Whenever this template renders, the observer ...

A problem occurred while compiling the 'SharedModule' template: The expression form is not compatible with the current system

In creating this share module, I have included the following components: @NgModule({ declarations: [ , DateToPersian , EnumToArrayPipe , SearchWtihInput , ConvertbytePipe , ArraySortPipe , MonySplitePipe , IsEllipsisActiveDir ...

Divide a string using multiple delimiters just one time

Having trouble splitting a string with various delimiters just once? It can be tricky! For instance: test/date-2020-02-10Xinfo My goal is to create an array like this: [test,Date,2020-02-10,info] I've experimented with different approaches, such ...

Put Off Observable Tasks

In the past, I utilized a standard WebSocket to send messages and await responses by employing $q.defer. This involved storing the deferred object and returning a promise. The response handler would then locate the stored deferred object and resolve it wit ...

Prevent modal from closing when clicking outside in React

I am currently working with a modal component in react-bootstrap. Below is the code I used for importing the necessary modules. import React from "react"; import Modal from "react-bootstrap/Modal"; import ModalBody from "react-bootstrap/ModalBody"; impor ...

What is the reason for the inability of `Array<Value>, Value` to properly retrieve the type of the array value?

I am encountering an issue with the type declaration below: function eachr<Subject extends Array<Value>, Value>( subject: Subject, callback: ( this: Subject, value: Value, key: number, subject: Subject ...

Encountering issues with installing angular/cli due to errors popping up

When attempting to install Angular in my terminal after completing the setup, I encountered the following error message: I have already installed: Node v6.10.3 npm ERR! Darwin 17.7.0 npm ERR! argv "/usr/local/bin/node" "/usr/local/bin/npm" "install" "-g ...

Mastering Angular: Accessing undefined properties (specifically 'push')

Currently, I am in the process of learning Angular and have encountered an issue while working on an assignment. The error message that I am facing is "Cannot read properties of undefined (reading 'push')." Despite knowing that this is a common e ...

Problem with Invoking method of parent component from child component in Angular 4

Despite having all my event emitters set up correctly, there's one that seems to be causing issues. child.ts: @Component({ ... outputs: ['fileUploaded'] }) export class childComponent implements OnInit { ... fileUploaded ...

What causes the disparity in functionality between simple html and css in an Angular 2 project compared to a vanilla html website?

When incorporating the following html/css into a new Angular project created with Angular CLI using 'ng new ProjectName', I encountered issues. Despite adding the CSS to app.component.css or styles.css and the HTML to app.component.html, the Angu ...

Cannot proceed with module import: Type 'ModuleWithProviders<T>' must have a single type argument

ERROR in node_modules/@angular/fire/firestore/firestore.module.d.ts:7:74 - error TS2314: Generic type 'ModuleWithProviders<T>' requires 1 type argument(s). 7 static enablePersistence(persistenceSettings?: PersistenceSettings): ...

Create a new function and assign it to "this" using the button inside ngFor loop

I am working with a li tag that has a *ngFor directive: <li *ngFor="let items of buttons"> <button (click)="newMap(items.id, $event)"> {{ items.name }} </button> </li> The buttons array looks like this: buttons = [ {nam ...

What steps can be taken to retrieve error.data from RTK Query while utilizing typescript?

When I log error to the console, this is what I see: { status: 401, data: "Invalid password" } If I attempt to log error.data, an error occurs: The "data" property does not exist in the "FetchBaseQueryError|SerializedErr ...

My component is missing the ChangeDetectorRef in Nativescript

I am attempting to automatically update an array within a Listview by utilizing ChangeDetectorRef in the following way: import { Component, OnInit, ChangeDetectionStrategy, Input, ChangeDetectorRef } from "@angular/core"; @Component({ selector: "regi ...

Looping through the json resulted in receiving a null value

When working with typescript/javascript, I encountered an issue while trying to fetch the 'statute' from a data object: {_id: "31ad2", x: 21.29, y: -157.81, law: "290-11",....} I attempted to assign data.law to a variable, but received a typeer ...

Handling routerLink exceptions in Angular 2, 4, and 5

In my app, I am working on catching routing exceptions. There are three ways in which a user can navigate: If the user types the address directly - this can be caught easily by using { path: '**', redirectTo: 'errorPage'} in the route ...

Understand and extract data from a JSON array using Typescript

Here is a JSON response I received from a remote server: { "string": [ { "id": 223, "name": "String", "sug": "string", "description": "string", "jId": 530, "pcs": [{ "id": 24723, "name": "String", ...

Increase the size of the NativeScript switch component

Here is the code I am working with: .HTML <Switch style="margin-top: 10" (checkedChange)="onFirstChecked1($event)" row="0" col="1" horizontalAlignment="center" class="m-15 firstSwitchStyle"></Switch> .CSS .firstSwitchStyle{ width: 30%; ...

An object that appears to be empty at first glance, but contains values that are undefined

I am facing an issue with my object that I am populating with information. The logs show the object as empty, but when I inspect it in Chrome, it appears to have the correct details filled in. Here is a snapshot of what the logs display: closed: closed o ...

Identify the specific directive selector utilized within the template by examining multiple directive selectors

My directive has two selectors, dirA and dirNotA, and I need to determine which one was used within the directive itself. I want to avoid creating multiple directives or using parameters in order to achieve this. Ideally, I would like to have a single dire ...