2

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

Farzad
  • 1,770
  • 4
  • 26
  • 48
  • seems that you want a multipart form data request - see https://github.com/axios/axios/issues/318#issuecomment-218948420 or is it simply a url encoded request data ? https://github.com/axios/axios/issues/362 – Ovidiu Dolha Feb 12 '18 at 17:23

2 Answers2

2

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

Dmitry S.
  • 3,766
  • 3
  • 18
  • 26
  • Thank you for the detailed answer. Question: we're saying that it's good for security because it cannot be added for cross-domain requests, but the fact that we can configure axios and add this header, does it mean that we're somehow bypassing the security part? – Farzad Feb 13 '18 at 16:22
1

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);
lorefnon
  • 12,875
  • 6
  • 61
  • 93
  • Thank you for your answer, any comment about my second part of the question about the `x-requested-with` header? Thanks – Farzad Feb 12 '18 at 17:51
  • Looking at Axios [codebase](https://github.com/axios/axios/search?utf8=✓&q=x-requested-with&type=) I don't see that header being set anywhere. If you want it to be set for all your requests, you can do something like: `axios.defaults.headers.common['x-requested-with'] = 'XMLHttpRequest'` – lorefnon Feb 12 '18 at 17:53
  • It is a convention used by jquery (and multiple other ajax libraries) to make it easy for servers to serve different responses from the same endpoint based on whether or not it is an ajax request. It is very common in PHP scripts to check this header and either render a full page with layout or just the content which can be injected into the page when using ajax. – lorefnon Feb 12 '18 at 17:59
  • Thank you so much for the information; it was very helpful – Farzad Feb 12 '18 at 18:07
  • Happy to help :) – lorefnon Feb 12 '18 at 18:19