CORS issue with Laravel 5 api and ionic 1 (Angular 1)

Question

Front-end application in Angular 1 and My APIs are built on Laravel and located in different server then sure i will face Cross Origin Request Sharing (CORS) problem and my APIs will not return expected results.

I faced the issue and according to some solutions I added some (following code)headers on index.php of Laravel but still I was not able to solve the issue.

header('Access-Control-Allow-Origin: *');

header('Access-Control-Allow-Methods: *');

header('Access-Control-Allow-Headers: *');

ERROR Message: on chrome browser,

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:8100 ' is therefore not allowed access.

Answer 1

You should not modify your headers manually at index.php. It is possible that Laravel overrides headers, moreover you cannot determine when your header() function will be called (if even).

You could implement some kind of interceptor that captures every request and sets CORS headers. Or you can try some library like https://github.com/barryvdh/laravel-cors

Answer 2

Are your headers only being added to a GET/POST? Because the problem is in the preflight OPTIONS request - you need to ensure that at a minimum , the Access-Control-Allow-Origin response header is returned for OPTIONS requests.