Issue with Angular 7's HttpClient POST request: encountering "Unknown Error" rather than sending the request

AFTER HOURS SOLUTION:
The Firefox extension uBlock was blocking the request, possibly due to containing adverts. Lesson learned: always check in a private tab!

Running out of ideas and seeking advice :)

UPDATE:
For clarity:
I am sending two POST requests:
/api/adverts/search which is not appearing in the Firefox network tab
and
/api/marketplacecategories/get which returns successfully with 200 status code.

UPDATE2:
The same request from a new Angular app is functioning.

Sending the request:

  
let options = {
   'headers' : {
      'accept': 'application/json'
   }
}
let data = new FormData()
this.http.post("/api/adverts/search",data, options)
.subscribe(
   data => {
      console.log("success")
      console.log(data)
   }
);

Angular is failing to send the request:

https://i.sstatic.net/dys05.png

Instead, it's throwing an error in the JavaScript console:

https://i.sstatic.net/JklPl.png

Meanwhile, the other POST request to the same API is working without any issues.

Postman can successfully make requests to the same URL:

https://i.sstatic.net/SJJtv.png

The server has CORS headers set globally and they are functioning correctly for the other successful request:

https://i.sstatic.net/UWa1t.png

Any insights would be greatly appreciated as I am feeling quite desperate! :D

Answer №1

The request was blocked by the Firefox uBlock Origin extension
likely due to the presence of advertisements.

Reminder: always verify in incognito mode!

Issue resolved.

Appreciate everyone's help and input!

Answer №2

In order to properly set up the URL, make sure to include the entire address:

this.http.post("http://192.168.56.11:2503/api/adverts/search",data, options)

It's advisable to save the common port in environment.ts file as follows:

apiUrl: "http://192.168.56.11:2503"

Then you can use it like this:

this.http.post(`${environment.apiUrl}/api/adverts/search`,data, options)

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

a collection of Interface objects

I've created an interface that looks like this: export interface testInterface { value1: string; value2: string[]; SubValue: [{}] } Everything works fine as I fill an array of type testInterface, which is bound to a dropdown list. Now, ...

How do I properly utilize ngIf in Angular2 to display text exclusively when there is no data retrieved from the server?

After retrieving data from the server using ngFor to display it as a search feature, I want to show a message saying 'There's no result' when there are no search results. How can I achieve this? I have attempted the following approach, but ...

Should await be used before dispatching hooks in redux?

I am facing a scenario where I need to execute 2 dispatch events consecutively, with no dependency between them. Could I implement it like the following code snippet? await dispatch(firstEvent) dispatch(secondEvent) My goal is to ensure that secondEvent ...

Getting the "No Connection with that ID" error from an ASP.NET application on IIS when using SignalR

My ASP.NET & Angular application was originally running smoothly on IIS on Windows Server 2019. However, upon moving the application to a different server, I encountered a recurring issue of receiving "No Connection with that ID" errors, causing some criti ...

securely employ the translate.instant() function

In my work with Angular 7, I have two files named arservice.json and enservice.json. These files are used in the code snippet below from app.module.ts: import {BrowserModule} from '@angular/platform-browser'; import {BrowserAnimationsModule} from ...

How can we assign a default value to a select element that is part of an *ngFor iteration in Angular 14?

While browsing another forum, I stumbled upon this particular post where someone claimed to have already solved the issue I'm facing. However, no matter how hard I try, I can't seem to get it to work in my own code. Within my component, I have tw ...

Struggling to increment the badge counter in a React Typescript project

I'm a bit unsure about where to apply the count in my Badge Component. The displayValue should include the count, but I'm struggling with how to implement it. UPDATE: The counter is now in place, but when I decrease the count and it reaches 0, t ...

"Error 404: The MEAN Stack has encountered a 404 Not Found error

I am currently developing a MEAN stack application and have encountered a 404 error when trying to submit a PUT request specifically for editing bookings. The editing process fails to update a particular booking. Client Side booking.service.ts getBookin ...

The specified data type is not compatible with the current context and cannot be treated as an array

Just starting out with TypeScript and I've encountered an issue that's preventing me from successfully building my app. Everything runs smoothly on my local environment, but as soon as I try to build it, an error pops up. Here's a snippet o ...

What is the best way to display React components using a loop?

One thing I'm trying to figure out is how to dynamically render components based on a constant number. If I had an array, it would be easy to do, but I'm struggling with the constant scenario. const numberOfItems = 4; return ( {/* Need to f ...

Using TypeScript to efficiently filter an Array by converting all values to lowercase

I have a custom array in TypeScript that needs to be filtered based on the city and job, with case-insensitivity as a requirement. array = [{ name: "Hardik", city: null, job: null }, { name: "John", city: "Ahmedabad", job: "IT" }, { name: "Margie", c ...

Ensure that the Observable is properly declared for the item list

.html // based on the error message, the issue seems to be in the HTML code <ion-card *ngFor="let invitedEvent of invitedEvents"> <ion-card-content> <img [src]="eventPhotoUrl$[invitedEvent.id] | async"> </ion ...

Guide on automatically inserting a colon (:) after every pair of characters in Angular

I am looking to automatically insert a colon (:) after every 2 characters in my input field: HTML <input nz-input type="text" appLimitInput="textAndNumbers" name="mac" formControlName="mac" (keydown.space)=&qu ...

Is it possible to utilize an @Input() in Angular with multiple types?

Is it possible for a parent component to pass an object in @Input to the child component that may not always be the same? For instance, can I use: @Input() obj: string | number; In my scenario, I have two different objects as potential inputs: @Input() ob ...

Effectively retrieving an observable value or transferring a reference

As a newcomer to Angular and Typescript, I am facing an issue with passing a reference into the subscribe function. In my code snippet below, I am attempting to assign the user value from the observable, but it seems like the function is not recognizing th ...

Encountered an issue with Firebase authentication: 'The property 'addEventListener' of null cannot be read.'

I'm currently working on a personal project but I've hit a roadblock with this error. Does anyone have any suggestions on how to resolve it? The error message I'm getting is: 'Cannot read property 'addEventListener' of null&ap ...

Is it feasible to differentiate generic argument as void in Typescript?

One of the functions in my code has a generic type argument. In certain cases, when the context is void, I need to input 0 arguments; otherwise, I need to input 1 argument. If I define the function argument as context: Context | void, I can still add voi ...

What is the best way to refresh NGRX data?

There are two models in a one-to-many relationship: export interface GroupModel { id: number; name: string; userIds?: number[]; } export interface UserModel { id: number; name: string; groupId?: number; } An issue arises when updating either m ...

Issue with clicking the login button in Protractor with TypeScript

I have set up Page objects for the home page and login page. As I proceed with my test cases, I am encountering an issue with the login button. During the execution of my test cases, the login button is not responding to clicks. Has anyone else faced sim ...

Updating Items in Angular Does Not Automatically Refresh Validity

I'm encountering an issue where even after submitting the form with a value, the error message "field is required" persists when it should disappear. Do you think there could be a problem with my validity check? You can take a look at this link for re ...