CODEWITHSUNDEEP
javascriptjqueryajaxreactjsaxios
Farzad
Farzad

Reputation: 1939

Axios how to set form data similar to jQuery ajax method?

I'm using axios in my application, but I'm having a hard time setting the content of the request.

There's currently a call to a URL using $.ajax like this:

$.ajax({
  method: 'POST',
  data: { 'accountId': accountId },
  url: serverUrl,
  /* success: ... */
});

And when I look at this request in Chrome dev tools, at the end I see something like this:

enter image description here

Now, I'm trying to do the same thing with axios:

axios.post(serverUrl, { accountId: accountId })
  .then(/* ... */);

But, when I look at the request in Chrome dev tools, I have this:

enter image description here

How can I get axios to do the same formatting as jQuery? And maybe the question is that: are they different or it's just the representation?

Also, I noticed that the jQuery call is somehow adding this header: x-requested-with: XMLHttpRequest, but to have the same header in axios, I have to set it manually. Is it normal? Am I missing an axios configuration to add this header?

Thank you

Upvotes: 2

Views: 2551

Answers (2)

Dmitry S.
Dmitry S.

Reputation: 4544

Some frameworks use this header to detect XHR requests, for example. Grails Spring uses this header to identify the query XHR and gives the JSON response or the HTML response as a response.

Most Ajax libraries (Prototype, JQuery and Dojo from version 2.1) include the X-Requested-With header, which indicates that the query was made using XMLHttpRequest instead of running by clicking a regular hyperlink or submitting a form button.

A good reason for security is that it can prevent CSRF attacks, because this header can not be added to the cross domain of the AJAX request without the server's consent through CORS.

Only the following headers are allowed:

  • To accept
  • Accept-Language
  • Content-Language
  • Last-Event-ID
  • Content-Type

any others call the "before flight" request in the browsers supported by CORS.

Without CORS, X-Requested-With can not be added to an XHR request with a cross domain.

If the server checks the presence of this header, it knows that the request did not initiate an attempt to make a request on behalf of the user from the attacker's domain using JavaScript.

It also checks that the request was not sent from the usual HTML form, from which it is more difficult to verify that it is not a cross domain without the use of tokens. (However, checking the Origin header can be an option in supported browsers although you leave old browsers vulnerable.)

See also: https://markitzeroday.com/x-requested-with/cors/2017/06/29/csrf-mitigation-for-ajax-requests.html

So also read for greater understanding:

FormData()

Request Payload

Upvotes: 2

lorefnon
lorefnon

Reputation: 13115

As documented here, You can use the URLSearchParams API to send data in the application/x-www-form-urlencoded format using axios.

Example from offical docs: 

var params = new URLSearchParams();
params.append('param1', 'value1');
params.append('param2', 'value2');
axios.post('/foo', params);

Upvotes: 1

Related Questions