Behaviour of Axios causing 400

Summary

I am having an error with a Yii2 based application where a fetch call successfully submits but switching out for axios returns a 400. I have been unsuccessful in fixing this issue. My current code is as follows, where form is the DOM element.

 var args = { method: 'POST', body: new FormData(form), data:{}, config: { headers: {'Content-Type': 'multipart/form-data' } } }

  // Submit form and update previousState
  fetch("/", args).then(()=>setContent(form));
  // axios("/", args).then(()=>setContent(form));

I have tried playing around with the args and such, but didn’t fix it.

The result from the server when fetch is used is 200 OK and when axios is used it returns 400 Bad Request The follow stack traces

Error: Request failed with status code 400
    at createError (createError.js:16)
    at settle (settle.js:17)
    at XMLHttpRequest.handleLoad (xhr.js:59)

dispatchXhrRequest | @ | xhr.js:172
-- | -- | --
  | xhrAdapter | @ | xhr.js:11
  | dispatchRequest | @ | dispatchRequest.js:59
  | Promise.then (async) |   |  
  | request | @ | Axios.js:53
  | wrap | @ | bind.js:9
  | _callee2$ | @ | autosave.js:162
  | tryCatch | @ | runtime.js:45
  | invoke | @ | runtime.js:271
  | prototype.<computed> | @ | runtime.js:97
  | asyncGeneratorStep | @ | asyncToGenerator.js:3
  | _next | @ | asyncToGenerator.js:25
  | Promise.then (async) |   |  
  | asyncGeneratorStep | @ | asyncToGenerator.js:13
  | _next | @ | asyncToGenerator.js:25
  | eval | @ | asyncToGenerator.js:32
  | eval | @ | asyncToGenerator.js:21
  | submit | @ | autosave.js:91

(autosave.js is my file)

Context

axios@^0.19.0: version “0.19.0” node v10.16.0 Mac OS 10.14.6 running mamp PRO 5.3

[smilledge]

Axios and fetch have different apis, and the same set of args wont be compatible between them.

Eg, this fetch request;

fetch('/', {
  method: 'POST', 
  body: new FormData(form),
  headers: {
    'Content-Type': 'multipart/form-data' 
  }
})

Would look like this in Axios;

axois.post('/', new FormData(form), {
  headers: {
    'Content-Type': 'multipart/form-data' 
  }
})

If you’re still having issues check the network tab to see if the request body is being sent correctly. Also, StackOverflow is more suitable for questions like this as it’s not an issue with Axios.

[aman79]

getting error for get request