Submitting XMLHttpRequest using FormData

Question

I am trying to create XHR with JavaScript, but I cannot get it to work correctly.

When I see the correct requests on the "Network" tab of the Chrome developer tools, I see that they have a "Form data" section , which lists all the informational messages sent with the request, for example this:

Now I tried to do my XMLHttpRequest any way that I know, but I cannot get this result.

I tried this:

 var xhr = new XMLHttpRequest(), form_data = "data%5Btumblelog%5D=drunknight&data%5Bsource%5D=FOLLOW_SOURCE_REBLOG"; // this is uri encoded: %5b = [ and %5D = ] xhr.open('POST','https://www.somesite.com/page?' + form_data, false); xhr.send(); 

But I got this “Query String Parameters” instead of “Form Data”:

I also tried this:

 var xhr = new XMLHttpRequest(), formData = new FormData(); formData.append("data[tumblelog]", "drunknight"); formData.append("data[source]", "FOLLOW_SOURCE_REBLOG"); xhr.open('POST','https://www.somesite.com/page', false); xhr.send(formData); 

But I got this "Request Payload" instead of "Form Data":

And finally, I tried this:

 var xhr = new XMLHttpRequest(), formData = { "data[tumblelog]": "drunknight", "data[source]": "FOLLOW_SOURCE_REBLOG" }; xhr.open('POST','https://www.somesite.com/page', false); xhr.send(JSON.stringify(formData)); 

But I got another "Request Payload" instead of "Form Data":

---

NOW, my question is:

How can I send my XMLHttpRequest to get the same result as in the FIRST image?

Answer 1

You are missing the Content-Type header to indicate that your data is encoded on the form.

This will work:

 var xhr = new XMLHttpRequest(), data = "data%5Btumblelog%5D=drunknight&data%5Bsource%5D=FOLLOW_SOURCE_REBLOG"; xhr.open('POST','https://www.somesite.com/page', false); // LINE ADDED xhr.setRequestHeader("Content-Type", "application/x-www-form-urlencoded"); xhr.send(data); 

FormData typically used to send binary data and automatically sets the Content-Type header to multipart/form-data (see FormData and FormData specification examples ). However, you must make sure that the server also accepts the request using this MIME type, which is obviously not your case, since you already tried and it did not work.

Answer 2

Putting this as an answer, because I believe that it will give you exactly what you want to know;

I just want to know which method is used to send this kind of data. I can assure you that the first image was captured using XHR

You did not provide enough information for us to find out how the “correct” version was generated, but you can write down the bits you need, reset the code, like this one before , the working XMLHttpRequest .open ed;

 (function (obj, methods) { var i; function log() { console.log.apply(console, arguments); } for (i = 0; i < methods.length; ++i) obj[methods[i]] = (function (method_name, method) { return function () { log.call(null, method_name, arguments); return method.apply(this, arguments); } }(methods[i], obj[methods[i]])); }(XMLHttpRequest.prototype, ['open', 'send', 'setRequestHeader'])); 

Now follow the action so that it lights up and the corresponding parameters are logged so that you can see exactly what is happening to it, since it is configured and sent, which should let you know what to transfer to yours.

---

The problem is that I get banned (403)

I am going to assume that this is not the same origin of security-error, because it looks like with server return, not browser cancellation