title: HTTP File Upload with CORS and Angular
body: <p>I am trying to generate a POST/PUT request where I upload a file to a URL.
  The backend script is in PHP using Lumen/Laravel 5.4; for front-end, I am using Angular 7 with <strong>HttpClient</strong> to send the file via <code>formdata</code>.</p>
  
  <p>Now if I send any <s>normal data (simple text not file) via POST it succeeds, but if I upload a file</s> request I get the following error:   </p>
  
  <ul>
  <li><p><strong>IN FIREFOX</strong>: no POST request is generated after pre-flight (<code>OPTIONS</code>) request and shows a generic CORS error:</p>
  
  <p><code>Cross-Origin Request Blocked: The Same Origin Policy disallows reading the remote resource at http://storage.local/upload. (Reason: CORS request did not succeed).[Learn More]</code></p></li>
  <li><p><strong>IN CHROME</strong>: POST request is generated but response is not shown, and throws <code>net::ERR_CONNECTION_ABORTED</code></p></li>
  </ul>
  
  <p><strong>Angular Code:</strong></p>
  
  <pre><code>let form = new FormData();
  form.append("material", mmfile);
  return this.http.post(environment.storage_server, form, {
    headers: new HttpHeaders().append("authorization", token),
  }).subscribe( event =&gt; {
    console.log(event)
  }, error =&gt; {
    console.log(error);
  }, () =&gt;{
    console.log("done");
  })
  </code></pre>
  
  <p><strong>Headers in PHP Script:</strong></p>
  
  <pre><code>header("Access-Control-Allow-Origin", "*")
  header("Access-Control-Allow-Methods", "POST, GET, OPTIONS")
  header("Access-Control-Allow-Credentials", "true")
  header("Access-Control-Allow-Headers", "Origin, Content-Type, Authorization, Content-Length, X-Requested-With, Host, Accept-Encoding, Referer, Accept, Content-Disposition, Content-Range, Content-Disposition, Content-Description")
  header("Access-Control-Max-Age", "86400");
  </code></pre>
  
  <p>Regards</p>
  
  <p>PS: I am writing after trying to solve this for 6 hours, so I may have missed a few things. Feel free to edit or ask for any details.</p>
  
  <p><strong>EDIT:</strong></p>
  
  <p>Headers returned in <code>OPTIONS</code></p>
  
  <pre><code>    HTTP/1.0 200 OK
  Date: Tue, 11 Dec 2018 12:02:20 GMT
  Server: Apache/2.4.29 (Ubuntu)
  Cache-Control: no-cache, private
  Access-Control-Allow-Origin: http://localhost:4200
  Access-Control-Allow-Methods: POST
  Access-Control-Allow-Headers: AUTHORIZATION
  Content-Length: 0
  Connection: close
  Content-Type: text/html; charset=UTF
  </code></pre>
  
  <p>Headers sent on <code>OPTIONS</code>:</p>
  
  <pre><code>Host: storage.local
  User-Agent: Mozilla/5.0 (Windows NT 10.0; Win64; x64; rv:63.0) Gecko/20100101 Firefox/63.0
  Accept: text/html,application/xhtml+xml,application/xml;q=0.9,*/*;q=0.8
  Accept-Language: en-US,en;q=0.5
  Accept-Encoding: gzip, deflate
  Access-Control-Request-Method: POST
  Access-Control-Request-Headers: authorization
  Origin: http://localhost:4200
  Connection: keep-alive
  </code></pre>