Why do I get CORS erros when using Angular's http.post but not with traditional HTML forms?

I have an Eloqua account that I use to capture form submission data. I currently have a very simple form that has a single user input field.

Following Eloqua's documentation, I have successfully POSTed to their server by doing the following.

<body>
    <form action="https://sXXXXXXXX.t.eloqua.com/e/f2" method="POST">
        <input type="text" name="name">
        <input type="hidden" name="elqFormName" value="myForm" id="eloquaFormName">
        <input type="hidden" name="elqSiteID" value="XXXXXXXXXXX"> 
        <input type="hidden" name="elqCustomerGUID" value="">
        <input type="hidden" name="elqCookieWrite" value="0"> 

        <button type="submit">Submit</button>
      </form>
</body>

And this POSTs successfully to Eloqua's servers and captures the data.

The problem I now have is that I'd like to integrate this form into an angular project. So my component html looks like this

<form [formGroup]="user_form_data" (ngSubmit)="onSubmit($event)">
  <input type="text" name="name" [formControl]="q1" required minlength="4" id="">
  <input type="hidden" name="elqFormName" value="myForm" id="eloquaFormName">
  <input type="hidden" name="elqSiteID" value="XXXXXXXXXXX"> 
  <input type="hidden" name="elqCustomerGUID" value="">
  <input type="hidden" name="elqCookieWrite" value="0"> 

  <button type="submit">Submit</button>
</form>

And here are the submission functions in the typescript.

First I inject HttpClient

private http: HttpClient

Then I make sure it's valid

  onSubmit() {
    if (this.user_form_data.valid === true) {
      this.postForm();
    }
    else {
      console.log('not valid!');
    }
  }

And then I post it

  postForm() {
    console.log('Attempting to post form!');
    this.http.post('https://sXXXXXXXX.t.eloqua.com/e/f2', {
      'name': 'TEST NAME',
      'elqFormName': 'myForm',
      'elqSiteID': 'XXXXXXXXX',
      'elqCustomerGUID': '',
      'elqCookieWrite': '0'
    }).subscribe(
      data => {
        console.log('Post was successful: ', data);
      },
      error => {
        console.log('Error: ', error);
      }
    );
  }

But this fails with the following error.

Cross-Origin Request Blocked: The Same Origin Policy disallows reading the remote resource at https://sXXXXXXXXX.t.eloqua.com/e/f2. (Reason: CORS request did not succeed)

What I'm confused about is why the regular front end form submits with absolutely no problem from localhost:3000 (Because I always run lite-server) but not from localhost:4200 (my angular server number). Also, why does the remote resource need to be read when I'm just POSTing data rather than using a GET.

Is posting from a normal HTML form different from posting using Angular's http client? How can I solve this?