Why Laravel API request sent from Vue gets canceled

Question

I'm trying to send formData from Vue using Axios to Laravel (v6) API on Laravel Homestead containing some data and an excel file to read and validate data in the backend. If the sheet contains records than 800 for example everything works file but when I increased it to 850 or 1000 the request gets cancelled I don't know why.

Successful request

Cancelled request

As you see it doesn't reach the actual request like the successful request it just gets cancelled at the beginning.

But the weird thing is that the data got validated and inserted into the DB already but the response gets converted to cancelled and the actual success response doesn't get returned from the API

Is this error related to server configurations or needs code fix?

Vue code

submitImportedUsers(){
  let formData = this.gatherFormData();
  this.importUsers(formData);
},
gatherFormData() {
  //create formData to send normal dta with files
  let formdata = new FormData();
  formdata.append("users", this.form.usersFile);
  formdata.append("images", this.form.imagesFile);
  const json = JSON.stringify({
    unique_fields: this.form.uniqueFields,
    update_duplicates: this.form.duplicateUsers,
    entity_id: this.entityId,
    user_id: this.userId,
  });
  formdata.append("data", json);
  return formdata;

Laravel

$usersImportService->moveFile($request->file('users'));

public function moveFile($file) {
    if(is_null($this->folderName) || !isset($this->folderName)){
        $this->generateUuid();
    }
    $ext = $this->getRequestFileExt($file);
    $usersFileName = $this->folderName.'.'.$ext;
    $this->fileName = $usersFileName;
    $path = storage_path().'/uploads';
    \File::isDirectory($path) or \File::makeDirectory($path, 0777, true, true);
    move_uploaded_file($file->getRealPath(), $this->storePath.$usersFileName);
}

Then start reading it using Laravel Excel and insert the data into the database

PHP User PHP User · Accepted Answer · 2021-01-17T14:18:02

I found the issue which the front end developer did in axios instance that might help anyone facing this issue

axiosInstance.defaults.timeout = 10000;

It could be anything like that used to set the timeout of axios it's set to 10 seconds here and the request needs more time so setting this to a higher value solved the issue

Why Laravel API request sent from Vue gets canceled

1 Answers