API call link in angular not calling API but created link works in postman

I'm making an app for a bootcamp where I call a third party API to get dog breeds, then I use 2 created apis to store users and the users favorites to 2 SQL database created with EF. I have an Angular front end that is where all of these will interact.

I'm trying to take a user object I've created out of a modal form and put it in one of my SQL databases using an api call from an API I've created expecting a user object.

In the dev tools I see it getting up to creating the link string, meaning the object is created, and all the paramaters have been added, but the API call doesn't happen and it doesnt post to the database.

Also if I copy and paste that linkstring into my API in postman it correctly adds the user to the database, but the API call just doesn't seem to want to post it to my database.

My relevant code is as follows. Any help is vastly appreciated

front end

user interface

export interface IUser{
Id?: number
firstName: string
lastName: string
email: string
password: string
}


api.service.ts

export class ApiService {
private breedUri = 'https://dog-breeds2.p.rapidapi.com/dog_breeds';
private userApi ='https://localhost:7078/api/Users';
private faveApi ='https://localhost:7078/api/FavoriteBreeds';

constructor(private http: HttpClient){}

addUser(newUser: IUser){

const linkString = (this.userApi+"/add?firstName="+newUser.firstName+"&lastName="+newUser.lastName+"&email="+newUser.email+"&password="+newUser.password)

console.log("user api link created",{linkString})
return this.http.post(this.userApi +"/add", newUser)

}


method in app.component.ts

constructor(private api: ApiService){}

addNewUser(){
this.addform = document.getElementById('loginForm');
const formData = new FormData(this.addform);

let newUser: IUser = {

firstName: formData.get("firstName") as string,
lastName: formData.get("lastName") as string,
email: formData.get("email") as string,
password: formData.get("psw") as string
};
console.log("user object being created check", {newUser})
this.api.addUser(newUser);

}


backend

[Route("api/[controller]")]
[ApiController]
public class UsersController : Controller
{
UsersRepository repo=new UsersRepository();

[HttpPost("add")]
public Users AddNewUser(Users newUser)
{

return repo.AddNewUser(newUser);
}


my devtools showing the link and created user object my swagger

Continue reading...