title: CORS Fails when uploading a file
body: <p>Here I meet a little problem with my code.</p>
  
  <h1><strong>What I do</strong></h1>
  
  <p>I have a laravel application in backend (on port 8000) in which I created a CORS middleware that allows me to make cross origin requests from my front-end (on port 8080)</p>
  
  <p><strong>Here is my Middleware Cors</strong></p>
  
  <pre><code>&lt;?php
  
  namespace App\Http\Middleware;
  
  use Closure;
  
  class Cors
  {
      /**
       * Handle an incoming request.
       *
       * @param  \Illuminate\Http\Request $request
       * @param  \Closure $next
       * @return mixed
       */
      public function handle($request, Closure $next)
      {
          return $next($request)
              -&gt;header('Access-Control-Allow-Origin', env("CORS_DOMAINS", 'http://localhost:8080'))
              -&gt;header('Access-Control-Allow-Methods', 'OPTIONS,POST,GET ,PUT, PATCH, DELETE')
              -&gt;header('Access-Control-Allow-Headers', 'Origin, X-Requested-With, Content-type, Authorization', 'Accept-Language','Content-Disposition', 'Accept');
      }
  }
  </code></pre>
  
  <p>Until now everything works well if I make simple requests with vue-resource. But when I pass as data a formData The CORS fails.</p>
  
  <p><strong>I created a Javascript class for uploading files</strong></p>
  
  <p>In the lines that follow it is only this line that interests us (it is the one who makes the XHR request):</p>
  
  <pre><code> return this.vm.$http.post(this.options.url, this.data)
  </code></pre>
  
  <h1><strong>My Upload Class</strong></h1>
  
  <pre><code>class Upload {
    defaultOptions = {
      extensions: null,
      maxSize: null,
      multiple: false,
      inputName: 'file'
    }
    errors = []
    constructor (files, Vue, options) {
      this.files = files
      this.vm = Vue
      this.options = Object.assign(this.defaultOptions, options)
      this.data = new FormData()
      return this.upload()
    }
  
    upload () {
      if (!this.files.length) return
      for (let i = 0; i &lt; this.files.length; i++) {
        if (this.checkFile(this.files[i])) {
          this.pushToData(this.files[i])
        } else {
          this.errors.forEach((error) =&gt; this.options.errorsCallback(error))
        }
      }
      for (let key in this.options.params) {
        if (this.options.params.hasOwnProperty(key)) { this.data.append(key, this.options.params[key]) }
      }
      return this.vm.$http.post(this.options.url, this.data)
    }
    checkFile (file) {
      return this.checkSize(file) &amp;&amp; this.checkExtensions(file)
    }
    checkSize (file) {
      if (this.options.maxSize &amp;&amp; file.size &gt; this.options.maxSize) {
        this.errors.push('The file `' + file.name + '` size must not exceed' + this.options.maxSize)
        return false
      }
      return true
    }
    checkExtensions (file) {
      if (this.options.extensions &amp;&amp; !this.options.extensions.includes(file.type.split('/')[1])) {
        this.errors.push('The file `' + file.name + '` must have one of theses extensions :' + this.options.extensions.join(','))
        return false
      }
      return true
    }
    pushToData (file) {
      this.data.append(this.options.inputName, file)
    }
  }
  
  export default Upload
  </code></pre>
  
  <h1><strong>What I want</strong></h1>
  
  <p>I want the query to succeed when I send a formData</p>
  
  <h1><strong>What I get</strong></h1>
  
  <p>I get a message saying that the Access-Control-Allow-Origin header is missing but this header is allowed in my Cors. I do not understand this error.
  <img src="https://imgur.com/e0bH22jl.png" alt="Une Image de L&#39;erreur"></p>