i can't send http request with header to laravel api on angular 4

Question

I am trying to send request with header to my Laravel 5.3 API, using Laravel passport for authentication. The returned header:

405 (Method Not Allowed)
Response to preflight request doesn't pass access control check: No 'Access-Control-Allow-Origin' header is present on the requested resource. Origin 'http://localhost:4200' is therefore not allowed access. The response had HTTP status code 405.

I have CORS Middleware on Laravel :

header('Access-Control-Allow-Origin', '*')<br>
  header('Access-Control-Allow-Methods', 'GET, POST, PATCH, PUT, DELETE, OPTIONS')<br>
  header('Access-Control-Allow-Headers', 'Origin, Content-Type, Authorization , X-Auth-Token');<br>

and my front-end and api has different address :
myfrontend.mydomain.com
myapi.mydomain.com

My Angular HTTP request header is:

let headers = new Headers({
      'Content-Type': 'application/json; charset=utf-8',<br>
      'Authorization': 'LaravelReturnedAuthToken',<br>
      'Accept': 'application/json; charset=utf-8',<br>
      'Access-Control-Allow-Origin': '*',<br>
      'Access-Control-Allow-Methods': 'PUT, GET, POST, DELETE, OPTIONS',<br>
      'Access-Control-Allow-Headers': 'Content-Type, x-xsrf-token',<br>
});

let options = new RequestOptions({headers: headers});

If I remove Angular HTTP request header, everything works. I don't understand what I'm doing wrong.

ApI : Laravel 5.3
Front-end : Angular 4

405 (Method Not Allowed) indicates you need to configure your PHP server to handle OPTIONS requests. Because your request adds Content-Type: application/json and Authorization headers to the request, that triggers your browser to (automatically on its own) do a CORS preflight OPTIONS request before it tries whatever request you’re making from your own code. And if that preflight fails, then the browser never moves on to trying the request in your code. See developer.mozilla.org/en-US/docs/Web/HTTP/… — sideshowbarker

Martin Adámek Martin Adámek · Accepted Answer · 2017-10-21T10:57:08

Just remove those Access-Control headers from your request. They are not meant to be sent with request, but rather they have to be returned with the response.

More about this on MDN:

https://developer.mozilla.org/en-US/docs/Web/HTTP/CORS

i can't send http request with header to laravel api on angular 4

1 Answers