title: Laravel Cors Middleware not working with POST Request
body: <p>So I am using <code>Laravel 5.8</code> as an <code>API</code> to a <code>ReactJS</code> view. </p>
  
  <p>I already created a 'cors' middleware, i registered it on <em>Kernel.php</em> file, and I am using it on the api-routes that I am using. I tested using a GET Request and it worked, but when I test with a POST Request, I get the cors error: </p>
  
  <blockquote>
    <p>Access to fetch at '<a href="http://localhost:8000/api/posts" rel="nofollow noreferrer">http://localhost:8000/api/posts</a>' from origin '<a href="http://localhost:3000" rel="nofollow noreferrer">http://localhost:3000</a>' has been blocked by CORS policy: Response to preflight request doesn't pass access control check: No 'Access-Control-Allow-Origin' header is present on the requested resource. If an opaque response serves your needs, set the request's mode to 'no-cors' to fetch the resource with CORS disabled. </p>
  </blockquote>
  
  <p>So i have on my <em>api.php</em> ("/routes/api.php"):</p>
  
  <pre><code>Route::get('/posts', 'PostController@index')-&gt;middleware('cors');
  Route::post('/posts', 'PostController@store')-&gt;middleware('cors');
  </code></pre>
  
  <p>My <em>cors.php</em> middleware:</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', '*')
        -&gt;header('Access-Control-Allow-Methods', 'GET, POST, PUT, DELETE, OPTIONS')
        -&gt;header('Access-Control-Allow-Headers', 'Content-Type, Accept, Authorization, X-Requested-With, Application');
    }
  }
  </code></pre>
  
  <p>On my <em>Kernel.php</em> ("/app/Http/Kernel.php") I updated the "$routeMiddleware" array with my <code>'cors'</code> middleware</p>
  
  <pre><code>'cors' =&gt; \App\Http\Middleware\Cors::class, 
  </code></pre>
  
  <p>Now in my React project, my <em>api.js</em> (where I made the code to make the requests):</p>
  
  <pre><code>// get Posts
  export const getPosts = () =&gt; {
    return fetch('http://localhost:8000/api/posts')
      .then(res =&gt; res.json())
      .then(json =&gt; console.log(json))
      .catch(err =&gt; console.log(err));
  }
  
  // create new post
  export const createPost = (post) =&gt; {
  
    return fetch('http://localhost:8000/api/posts',
    {
      method: 'post',
      headers: {
        'Accept': 'application/json, text/plain, */*',
        'Content-Type': 'application/json'
      },
      body: JSON.stringify(post)
    })
    .then(res =&gt; res.json())
    .then(res =&gt; console.log(res));
  }
  </code></pre>
  
  <p>I don't understand why everything is working fine when i try the <code>Get request</code>, but when i try the <code>Post Request</code>, i get the <code>CORS error</code>. Someone already had this problem?</p>