title: Angular 6 + Laravel 5.6: CORS Issue with httpClient.post
body: <p>Created an API with Laravel 5.6 and all endpoints work as expected with Postman. The problems began when i started to develop the Angular 6 app. Since i'm working locally, i began to get CORS errors in Chrome no matter the http method used (httpClient). So i created a middleware in Laravel to process the CORS requests. And everything started to worked as expected, so i thought... Now i'm facing other problems.</p>
  
  <p>I'm using Laravel's default controller actions for the CRUD tasks, so i'm mostly using resource routing (Route::resource). For custom methods i'm using Route::post().</p>
  
  <p>Now, the weird thing is that i'm able to <strong>send post request</strong> for custom methods (Route::post), but not to resource routes.</p>
  
  <p>Example:</p>
  
  <pre><code>//post requests to custom routes work as expected
  Route::post('users/block', 'API\UserController@toggleBlock');
  Route::post('users/access', 'API\UserController@sendAccess');
  
  //post requests to resource routes nothing happens
  Route::resource('settings', 'API\SettingController');
  Route::resource('products', 'API\ProductController');
  </code></pre>
  
  <p>If i change the routes to the following:</p>
  
  <pre><code>Route::get('settings', 'API\SettingController@index'); //works!
  Route::post('settings', 'API\SettingController@store'); //nothing happens!!
  Route::post('settings/bazinga', 'API\SettingController@store'); //works!!
  </code></pre>
  
  <p>So, from what i can tell, i can't use the same URI even thought the http methods are different.</p>
  
  <p>Here is my CORS middleware:</p>
  
  <pre><code>public function handle($request, Closure $next)
  {
      //apply cors only to api routes
      if (Request::segment(1) == 'api') {
          header("Access-Control-Allow-Origin: *");
  
          // ALLOW OPTIONS METHOD
          $headers = [
              'Access-Control-Allow-Methods' =&gt; 'POST, GET, OPTIONS, PUT, DELETE',
              'Access-Control-Allow-Headers' =&gt; 'Content-Type, X-Auth-Token, Origin, Authorization, Accept, Cache-Control',
          ];
          if ($request-&gt;isMethod("OPTIONS")) {
              // The client-side application can set only headers allowed in Access-Control-Allow-Headers
              return Response::make('OK', 200, $headers);
          }
  
          $response = $next($request);
          foreach ($headers as $key =&gt; $value) {
              $response-&gt;header($key, $value);
          }
      } else {
  
          $response = $next($request);
      }
      return $response;
  }
  </code></pre>
  
  <p>Why is this happening? Is this related to CORS? Since everything works as expected with Postman, this might be related with CORS, right?</p>
  
  <p><strong>UPDATE: cURL Output</strong></p>
  
  <pre><code>&gt; curl 'https://api.project.localhost:34430/api/settings' -D -X OPTIONS -H 'pragma: no-cache' -H 'access-control-request-headers: authorization,' -H 'access-control-request-method: POST' -H 'origin: &lt;http://localhost:4200&gt;' -o output.txt
  </code></pre>
  
  <blockquote>
    <p>curl: (6) Could not resolve host: OPTIONS</p>
  </blockquote>
  
  <p><strong>UPDATE #2: Angular Code</strong></p>
  
  <p>Save Method:</p>
  
  <pre><code>save(settings: Setting[]): Observable&lt;any&gt; {
      const path = 'settings';
  
      const headers = {
        'Cache-Control': 'no-cache'
      };
  
      const params = { settings: settings };
  
      return new Observable(observer =&gt; {
          this.api.post(path, params, headers).subscribe(
              data =&gt; {
                // observable execution
                observer.next('Save Settings');
                observer.complete();
          },
          error =&gt; console.log(error) // error path
        );
      });
  }
  </code></pre>
  
  <p>Post Method:</p>
  
  <pre><code>post(path: string, params: Object, headers?: any): Observable&lt;ApiResponse&gt; {
      const request = this.createRequestObject(path, params, headers);
  
      return this.http.post&lt;ApiResponse&gt;(
          request.endPoint,
          request.params,
          request.httpOptions
      );
  }
  
  private createRequestObject(path: string, params?: Object, headers?: any): ApiRequest {
      if (headers) {
        Object.assign(this.headers, headers);
      }
  
      const request = new ApiRequest();
      request.endPoint = this.endPoint + path;
      request.httpOptions = { headers: this.headers };
      request.params = params;
  
      return request;
  }
  </code></pre>
  
  <p><strong>UPDATE #3: Chrome Dev Tools Console</strong></p>
  
  <p>Get Request:</p>
  
  <p><a href="https://i.stack.imgur.com/ZTJNx.jpg" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/ZTJNx.jpg" alt="Get Request Console Log"></a></p>
  
  <p><a href="https://i.stack.imgur.com/lC8XZ.jpg" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/lC8XZ.jpg" alt="Get Request Network Activity 1"></a></p>
  
  <p><a href="https://i.stack.imgur.com/ib5kv.jpg" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/ib5kv.jpg" alt="Get Request Network Activity 2"></a></p>
  
  <p>Post Request:</p>
  
  <p><a href="https://i.stack.imgur.com/IiFF6.jpg" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/IiFF6.jpg" alt="Post Request Console Log"></a></p>
  
  <p>Note: Nothing happens in Network Activity when i perform the post request.</p>