HTML form method is POST but it's submitting as OPTIONS

Question

I have a weird thing happening to say the least.

An html form that has a method of post when submitted is using options instead, here's the html code:

<form action="https://omitted" method="post" id="canvasForm">
    <div class="form-group" style="margin-top: 10%; text-align: center;">
        <h1>Canvas Integration</h1>
        <label style="text-align: right;" for="school_name" class="col-sm-4 control-label">School Prefix *</label>
        <div class="col-sm-10">
            <input type="text" style="margin-right: 1%; margin-bottom: 2%; width:60%" class="form-control" name="school_name" placeholder="School Prefix" tabindex="1" required>
            <!-- <i class="fa fa-question-circle" aria-hidden="true"></i> -->
        </div>
        <label style="text-align: right;" for="code" class="col-sm-4 control-label">Code *</label>
        <div class="col-sm-6" >
            <input id="code" type="text" class="form-control" style="margin-right: 1%; margin-bottom: 2%; width:60%" name="code" tabindex="1" placeholder="code" required>
        </div>
        <label style="text-align: right;" for="code" class="col-sm-4 control-label">School Canvas URL *</label>
        <div class="col-sm-6" >
            <input id="canvas_url" type="text" class="form-control" style="margin-right: 1%; margin-bottom: 2%; width:60%" name="canvas_url" tabindex="1" placeholder="school canvas url" required>
        </div>
        <label style="text-align: right;" for="clientid" class="col-sm-4 control-label">ID *</label>
        <div class="col-sm-6">
            <input type="text" class="form-control" style="margin-bottom: 2%;margin-right: 1%; width:60%" name="clientid" placeholder="ID" tabindex="1" required>
            <div class="tooltip">
                <i class="fa fa-question-circle" aria-hidden="true" >
                <img  class="tooltiptext" src="images/clientid.png" style="width: 550px"></i>
            </div>
        </div>
        <label style="text-align: right;" for="securitykey" class="col-sm-4 control-label">Key *</label>
        <div class="col-sm-6">
            <input type="text" class="form-control" style="margin-right: 1%; margin-bottom: 2%; width:60%" name="securitykey" placeholder="Key" tabindex="1" required>
            <div class="tooltip">
                <i class="fa fa-question-circle" aria-hidden="true" >
                <img  class="tooltiptext" src="images/securitykey.png" style="width: 550px"></i>
            </div>
        </div>
        <div class="col-sm-6">
            <input id="redirect_url" type="hidden" class="form-control" style="margin-right: 1%; margin-bottom: 2%; width:60%;float: center;" name="redirect_url" placeholder="Canvas URL" tabindex="1" required>
        </div>
    </div>
    <div class="form-group" style="text-align: center;">
        <div class="col-sm-offset-2 col-sm-10">
            <button type="submit" class="btn btn-primary btn-w-md" >Submit</button>
        </div>
    </div>
    <div class="form-group" style="text-align: center;">
        <div id="response" class="col-sm-offset-2 col-sm-10">
        </div>
    </div>
</form>

and I have some JS code that submits the form:

    form.onsubmit = function (e) {
        // stop the regular form submission
        e.preventDefault();

        // collect the form data while iterating over the inputs
        var data = {};
        for (var i = 0, ii = form.length; i < ii; ++i) {
          var input = form[i];
          if (input.name) {
            data[input.name] = input.value;
          }
        }
        // construct an HTTP request
        var xhr = new XMLHttpRequest();
        xhr.open(form.method, form.action, true);
        xhr.setRequestHeader('Content-Type', 'application/json; charset=UTF-8');

        // send the collected data as JSON
        xhr.send(JSON.stringify(data));

        xhr.onloadend = function (response) {
          console.log('response from server',response);
          var responseHtml = document.getElementById('response');
          if(response.target.status==400){
             responseHtml.innerHTML = '<div id="response" class="alert alert-success" role="alert" >' + response.target.response +'. Please contact edquire support team at support@edquire.com.' + '</div>';
          } else if (response.target.status==200) {
             responseHtml.innerHTML = '<div id="response" class="alert alert-success" role="alert" >' + response.target.response +'! Your Canvas resource is successfully connected with us :)' + '</div>';
          } else {
             responseHtml.innerHTML = '<div id="response" class="alert alert-success" role="alert" >' + 'Something went wrong :( Please Try Again!' + '</div>';
          }
        };
    };

when I submit it I can see that it's using options and it's not passing the input fields (check screenshot below)

See https://developer.mozilla.org/en-US/docs/Web/HTTP/Server-Side_Access_Control#Preflighted_requests — Phil, Dec 06 '17 at 03:38
That's why when I test through postman it works but not from the HTML form, that makes sense now — Naguib Ihab, Dec 06 '17 at 03:52
by the way, given the headers you've shown in your image, that server does not allow CORS — Jaromanda X, Dec 06 '17 at 03:52
@JaromandaX what did you look for in the header to see that? — Naguib Ihab, Dec 06 '17 at 03:53
cors headers, have you even bothered investigating the link by Phil? — Jaromanda X, Dec 06 '17 at 03:53

score 0 · Accepted Answer · answered Dec 06 '17 at 03:37

0

That's how CORS works. You are submitting a POST request to a remote host. First your browser submits an OPTIONS request to check whether the remote host accepts HTTP requests from other hosts. If it does the POST request will be submitted afterwards.

answered Dec 06 '17 at 03:37

Alexander Elgin

5,926
4
33
47

1

*"First your browser submits an OPTIONS request to check whether the remote host accepts HTTP requests from other hosts"* – Phil Dec 06 '17 at 03:38
To elaborate, if OP didn't change the request content-type header, there would not be a pre-flight `OPTIONS` request. Access to the remote resource is **always** determined by the `Access-Control-Allow-Origin` response header (if any) – Phil Dec 06 '17 at 03:46

score -1 · Answer 2 · answered Dec 06 '17 at 03:41

With the rest client, every POST request is followed by a POST. This is done to verify few things, for example :

Whether it is a valid request
if the method is supported etc.

You can find more information on another thread here: What is the reason behind using OPTION request before POST on CORS requests?

HTML form method is POST but it's submitting as OPTIONS

2 Answers2