XMLHttpRequest JSON Post going as form-urlencoded

Question

I have a form in a HTML page which does the following:

form method="POST" id="myForm" onsubmit="callSlates();">

Javascript function is as follows:

function callSlates(){
    var form=document.getElementById('myForm');

    form.action = "https://dev1-apiservicesweb.dev.jabs.com:8111/api/v1/systems/slates";

    // 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 == "ID1") {
            data[input.name] = input.value;
        }
        if (input.name == "SDCode") {
            data[input.name] = input.value;
        }
    }
    var xhr = new XMLHttpRequest();
    xhr.open('POST', form.action);
    xhr.setRequestHeader('Content-Type', 'application/json');
    xhr.onreadystatechange = function () {
        if (xhr.readyState == 4 && xhr.status == 200) {
            alert(xhr.responseText);
        }
    }
    xhr.send(JSON.stringify(data));

}
//return false;
}

POST calls are happening but when I check the Request Header, it shows that the application/x-www-form-urlencoded and am ending with error 504-Gateway Timeout Error

The endpoint I am calling expects json header and JSON data. I believe I am doing that but when I used Chrome developer tools, I don't see that. Has it got something to do with the way am making the call?

Edit: When I tried hitting that URL with Postman, with header and body as JSON, am getting 200 response (as expected).

UPDATE: I understood that the form was getting submitted rather than the Ajax call and thus took Barmar advice and put return false; in form onsubmit. Now am not getting 504 anymore and getting 405 instead.

Following is the request header am seeing currently:

Accept:*/*
Accept-Encoding:gzip, deflate, sdch, br
Accept-Language:en-US,en;q=0.8
Access-Control-Request-Headers:content-type
Access-Control-Request-Method:POST
Connection:keep-alive
Host:dev1-apiservicesweb.dev.jabs.com:8111
Origin:http://localhost:3000

And in general information, it says:

Request Method:OPTIONS
Status Code:405

As per le_m, could this be a CORS issue?

I posted similar question which had less audience and no response and java dev's often do ajax calls and use XMLHttpRequest object and thus added. — Anuj Balan, Apr 28 '17 at 21:35
Can someone help me with it? Its been plaguing me for a day now. — Anuj Balan, Apr 28 '17 at 21:43
I think more is going on than what you've presented. like a form submission. or maybe CORS. — Kevin B, Apr 28 '17 at 21:44
form submission it is. It's not CORS issue as I found no issues when doing call from Postman. Can form submission cause any unwanted issues? — Anuj Balan, Apr 28 '17 at 21:47
well, yeah, it aborts any ajax requests you have running. such as the one in your question. — Kevin B, Apr 28 '17 at 21:50
Also... it working in postman has nothing to do with cors. postman isn't sending requests using ajax/xhr. — Kevin B, Apr 28 '17 at 21:50
Let us [continue this discussion in chat](http://chat.stackoverflow.com/rooms/142945/discussion-between-anuj-balan-and-kevin-b). — Anuj Balan, Apr 28 '17 at 21:51
Can you suggest what's the right way to proceed from here? I want to make sure am sending the data to API endpoint and waiting for response. — Anuj Balan, Apr 28 '17 at 21:54
What if instead of `xhr.onreadystatechange`, you tried something like `xhr.onload=function(event){ alert("The server says: " + event.target.response); };`? — Mick Mnemonic, Apr 28 '17 at 22:07
What's the difference.. Sorry not that familiar with all these. — Anuj Balan, Apr 28 '17 at 22:12

score 2 · Accepted Answer · edited May 23 '17 at 12:18

Since your request works from your local host via postman but not from within the browser, the culprit is probably the Same Origin Policy:

Your browser attempts to send a Cross Origin Request (CORS). There are two types of CORS requests:

Preflighted requests: The browser first asks the server about supported HTTP methods by sending an HTTP OPTIONS request followed by the actual HTTP request upon approval.
Simple requests: The browser directly sends the actual HTTP request.

Now, which of the above does your browser choose? MDN states that simple requests will be send if the Content-Type is one of the following:

 application/x-www-form-urlencoded
 multipart/form-data
 text/plain

However, Content-Type: application/json is not allowed for simple requests. Thus, you currently send preflighted CORS requests. You can verify that by opening the developer console e.g. in Firefox: You will notice that your code first sends an OPTIONS request.

Now, this OPTIONS request receives a 405 Method not allowed error. This indicates that the server doesn't support preflighted CORS requests. You either need to change the server configuration OR change the Content-Type to one of the compatible ones listed above. If your server can't accept one of those content types, then you are probably out of luck.

See also this answer given by @ArslanTariq in reply to a similar issue.

That exactly was the issue. I turned off the web security in Chrome to confirm that and even with content-type: Json, I got 200 response. I believe I need not do anything in code specially than the one I posted here. Also, I'll be moving this code to a specific server/. Going forward I may not see this issue (As it won't be localhost anymore) ? — Anuj Balan, Apr 29 '17 at 12:44
@AnujBalan If you run this code from the same domain as your server API endpoint is on, then you should see no issues at all. — le_m, Apr 29 '17 at 13:57

score 0 · Answer 2 · answered Apr 28 '17 at 22:57

0

You're not preventing the normal form submission. Change your form to:

<form method="POST" id="myForm" onsubmit="callSlates();return false;">

return false; prevents the default submit action.

There's also no need to set form.action in your function, since you don't want to submit the form normally.

answered Apr 28 '17 at 22:57

Barmar

741,623
53
500
612

Trying the suggestion given. You want me to remove the form.action from JS code? – Anuj Balan Apr 28 '17 at 23:02
Yeah, just use a normal variable. – Barmar Apr 28 '17 at 23:03
Posted more info Barmar – Anuj Balan Apr 29 '17 at 02:59
It does seem like a CORS issue, but I don't know how to fix it. – Barmar Apr 29 '17 at 03:27
Did you try the solution in the question le_m linked to? – Barmar Apr 29 '17 at 03:28
I don't have access to endpoint API to add additional content-Type. – Anuj Balan Apr 29 '17 at 03:55

XMLHttpRequest JSON Post going as form-urlencoded

2 Answers2