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

Question

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?

I would not blame Angular for it. That's how CORS works See also https://stackoverflow.com/questions/11423682/cross-domain-form-posting — yurzui, Nov 15 '18 at 18:46
I'm not necessarily blaming angular. I'm blaming my lack of knowledge of what's going on when I use HTTPClient. Is it different from a normal HTML form being posted? — onTheInternet, Nov 15 '18 at 18:56

score 0 · Answer 1 · edited Jul 17 '20 at 18:11

0

$.ajax({
    url: "<endpoint>",
    dataType: "jsonp",
    contentType:"application/json"
    success: function(result) {
        console.log(result); // server response
    }

});

edited Jul 17 '20 at 18:11

Yunnosch

26,130
9
42
54

answered Jul 17 '20 at 18:09

Kumari Anamika

1
2

3

I doubt that this helps, or even works at all. To convince me otherwise, please add an explanation how this code works and why it is supposed to help with the problem. – Yunnosch Jul 17 '20 at 18:11
Surething..Thanking you!! – Kumari Anamika Jul 17 '20 at 18:13
1

Your comment and that you seem to not act on my recommendation are in apparent conflict. Do you intend to [edit] your post to add an explanation? – Yunnosch Jul 17 '20 at 18:19

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

1 Answers1