title: Axios POST request not working
body: <p>I know there are lots of question out there with the same issue, but none of the solutions have worked for me yet. </p>
  
  <p>I have a ReactJS application consuming an API built in Lumen. The API is also consumed by <strong>React Native</strong> and <strong>JQuery AJAX</strong> and works fine on both.</p>
  
  <p>When I try to send a <strong>POST</strong> request with axios from ReactJS, I get a 405 Method Not Allowed error on the <strong>OPTIONS</strong> Request.</p>
  
  <p><a href="https://i.stack.imgur.com/lNN6m.png" rel="noreferrer"><img src="https://i.stack.imgur.com/lNN6m.png" alt="Response Headers"></a> 
  <a href="https://i.stack.imgur.com/AzsPq.png" rel="noreferrer"><img src="https://i.stack.imgur.com/AzsPq.png" alt="Request Headers"></a></p>
  
  <p>The axios request is:</p>
  
  <pre><code>const body = { username, password };
  
  axios.post(`{$uri}/payment/api/login`, {body})
       .then(res =&gt; console.log(res))
       .catch(err =&gt; console.log('Login: ', err));
  </code></pre>
  
  <p>At first I thought this was a CORS issue, which would have been strange because my API is being consumed by a static site hosted on AWS S3 with no problems. So my CORS middleware works fine. </p>
  
  <p>Than I tried using fetchAPI to call the API and that works fine. I tried to send a <strong>POST</strong> request to a dummy API <em><a href="https://jsonplaceholder.typicode.com/users" rel="noreferrer">https://jsonplaceholder.typicode.com/users</a></em> from axios and it worked fine.</p>
  
  <p><strong>Edit</strong> </p>
  
  <p>Okay so I just found out that fetchAPI sends data in <em>application/x-www-form-urlencoded</em> format which somehow is not subject to pre-flight requests. That should mean that there is an issue with the CORS Middleware.</p>
  
  <p><strong>CORSMiddleware</strong></p>
  
  <pre><code>&lt;?php
  
  namespace App\Http\Middleware;
  
  use Closure;
  
  class CORSMiddleware
  {
    /**
     * Handle an incoming request.
     *
     * @param  \Illuminate\Http\Request  $request
     * @param  \Closure  $next
     * @return mixed
     */
  
     public function handle($request, Closure $next)
     {
        $response = $next($request);
        $response-&gt;header('Access-Control-Allow-Methods', 'HEAD, GET, POST, PUT, PATCH, DELETE, OPTIONS');
        $response-&gt;header('Access-Control-Allow-Headers', $request-&gt;header('Access-Control-Request-Headers'));
        $response-&gt;header('Access-Control-Allow-Origin', '*');
     }
  }
  </code></pre>
  
  <p>The exact same Middleware is also used in another API build in Lumen and consumed by Vue Front-End which uses <strong>axios</strong>.</p>
  
  <p><strong>Additional Info</strong></p>
  
  <p><a href="https://i.stack.imgur.com/stcBL.png" rel="noreferrer"><img src="https://i.stack.imgur.com/stcBL.png" alt="Console Error"></a></p>
  
  <p><strong>GET</strong> Request works fine on my API.</p>