How to post form data in angular?

Question

I am trying to post one of the form data to specific server which is CORS disabled that means it will only accept POST method and dis-allowed OPTIONS preflight request which is completely understandable but one of the post says that if request is Simple Request (POST with content type =application/x-www-form-urlencoded, )it should not create problem but i am still getting error of

Actual Error on console..

Access to XMLHttpRequest at 'https://****.****.com/hpm/launchTransnoxScreen.hpm' from origin 'http://localhost:4200' has been blocked by CORS policy: No 'Access-Control-Allow-Origin' header is present on the requested resource.

--

Could you please help me identify the issue ? I am completely new to angular and just started exploring.

Why is an OPTIONS request sent and can I disable it?

Already checked above URL


    import { Injectable } from '@angular/core';
    import { Patient } from '../model/patient';
    import { HttpClient, HttpHeaders, HttpParams } from '@angular/common/http';


    @Injectable({
      providedIn: 'root'
    })
    export class SignupService {
    private url: string = "https://stagemc.transnox.com/hpm/launchTransnoxScreen.hpm";

      private httpHeadersVar = {
        headers: new HttpHeaders({
          'Content-Type': 'application/x-www-form-urlencoded',
          'Accept': 'text/html'
        })
      };
      patientFormData: Patient;
      constructor(private http: HttpClient) { }

      callThP(data) {
        const formData = new FormData();
        formData.append('myKey1', 'some value 1');
        formData.append('myKey2', 'some value 2');
        formData.append('myKey3', 'true');

        this.http.post(this.url, formData, this.httpHeadersVar).subscribe(
          (res) => {
            console.log(res);
          },
          err => console.log(err)
        );
      }
    }

Below sample of html is working fine individually when we clicked on button.

It connects to host and revert with sample page.

<html>
    <head></head>
    <body>
        <form id="hppForm" name="hppForm" method="POST" action=" https://stagecp.transnox.com/hpm/launchTransnoxScreen.hpm">
            <input name="uniqueID" id="uniqueID" type="hidden" value="XXX3" />
            <input name="deviceID" id="deviceID" type="hidden" value="test_deviceID"/>
            <button type="submit" class="btn btn-primary btn-block">Sign up</button>
        </form>
    </body>
</html>

In which language you have made api. In api configuration you have to allow CORS — ShivShankar Namdev, Apr 17 '19 at 07:42
Hi Shiv, as i mentioned earlier this should be considered as simple request and should not send Options method . Thanks — Danny M, Apr 19 '19 at 03:55
@DnyaneshwarMuley I believe by `Options` you are talking about the Preflight. And you are saying that a `Simple Request`, as defined by HTTP, includes a `POST` method with a Content-Type of `application/x-www-form-urlencoded`. I think your question is perfectly valid, and should not trigger a CORS exception. Others mention the `API`. But as you know, the resource you are calling is irrelevant. The Browser/caller is the one who enforces CORS, not the resource you are calling. So if the browser determines it is not a `Simple Request` it throws that exception. — Suamere, Oct 11 '20 at 03:17
That all said, I believe the issue is with the HTTP packages you are using (Angular HTTP perhaps). They may be adding additional headers that break the rules of a `Simple Request`. I don't have the documentation, but one example might be something like `Accept-Encoding`. But again, I'm not a master of the rules of `Simple Request`, though I'm pretty sure it's because it's adding headers that break the rules. — Suamere, Oct 11 '20 at 03:19

VENKATA SATYA NAVEEN NAGULAPAL · Answer 1 · 2019-04-17T17:22:06.287

-1

I think HTTP Headers are not working: Try this:

`Implement this:

import { HttpClient, HttpHeaders } from '@angular/common/http';

const httpOptions = {
  headers: new HttpHeaders({
    'Content-Type': 'application/json'
  })
};


this.http.post<any>
      (`Your URL`, formData).subcribe(
      (res) => {
        console.log(res);
      },
      err => console.log(err)
    );

If this is not working then there might be chance that your API is not allowing the CORS.

edited Apr 17 '19 at 17:22

answered Apr 17 '19 at 07:13

VENKATA SATYA NAVEEN NAGULAPAL

39
1
6

Hi Venkata, actually it's not a api call. Thats why i am not using json header. Its a simple html form submission and if all the values of form is correct then server will redirect to their own page. Please check the sample html i mentioned above. BTW thanks for your reply. – Danny M Apr 17 '19 at 07:23

score -1 · Answer 2 · answered Apr 17 '19 at 10:10

-1

you can follow this link:

https://daveceddia.com/access-control-allow-origin-cors-errors-in-angular/

You should also check your backend language where you have created API, there enable CORS

answered Apr 17 '19 at 10:10

Chirag

413
1
6
16

How to post form data in angular?

Actual Error on console..

2 Answers2