safrazik / vue-file-agent

The most beautiful and full featured file upload component for Vue JS
https://safrazik.github.io/vue-file-agent/
MIT License
731 stars 93 forks source link

Upload with tus and cookie doesn't work #181

Open boudafc opened 2 years ago

boudafc commented 2 years ago

Back-end: Laravel with Tus.io and Sanctum for authentication Description: Everything works with tus-js-client. With vue-file-agent, everything work well when not using authentication, but when using authentication, the cookie (XSRF-TOKEN) is not added to the request. So then back-end return a "CSRF token mismatch." error.

My vue-agent-component:

<VueFileAgent
      ref="vueFileAgent"
      :theme="'grid'"
      :multiple="true"
      :deletable="true"
      :meta="true"
      :resumable="true"
      :maxFiles="14"
      :headers="headers"
      :uploadWithCredentials="true"
      :helpText="'Choose images or zip files'"
      :errorText="{
        type: 'Invalid file type. Only images or zip Allowed',
        size: 'Files should not exceed 10MB in size'
      }"
      @select="filesSelected($event)"
      @beforedelete="onBeforeDelete($event)"
      @delete="fileDeleted($event)"
      v-model="fileRecords"
    ></VueFileAgent>

Headers:

this.headers = {
      Accept: "application/json",
      "Access-Control-Allow-Credentials": "true",
      "X-XSRF-TOKEN": decodeURIComponent(this.getCookieValue("XSRF-TOKEN"))
    };

Function getCookieValue:

getCookieValue(a) {
      const b = document.cookie.match("(^|;)\\s*" + a + "\\s*=\\s*([^;]+)");
      return b ? b.pop() : "";
    },

Versions: "tus-js-client": "^2.3.1", "vue-file-agent": "^1.7.3",