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
– sideshowbarker, Commented Oct 21, 2017 at 23:01

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

1

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

answered Oct 21, 2017 at 10:57

Martin Adámek

18.6k5 gold badges52 silver badges75 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

Majid Ahmadi Over a year ago

i changed to : let headers = new Headers({ 'Content-Type': 'application/json; charset=utf-8', 'Authorization': 'LaravelReturnedAuthToken', 'Accept': 'application/json; charset=utf-8', }); but it doesnt work yet!

Martin Adámek Over a year ago

Well you API is probably not configured as you think. You should check this in network tab in chrome, you can see the full request and response headers there. I guess those Access-Control headers will be missing in the response. The error you described here says so: No 'Access-Control-Allow-Origin' header is present on the requested resource.

Collectives™ on Stack Overflow

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

1 Answer 1

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related