CORS header error when Angular use for front end and Laravel used for Backend

Question

I am working with angular js 1.5 and laravel 5.4.

I have created middleware in laravel for CORS. It looks like below :

public function handle($request, Closure $next)
{
    header("Access-Control-Allow-Origin: *");
    header('Access-Control-Allow-Methods: GET, POST, OPTIONS');
    header('Access-Control-Allow-Headers: Origin, Content-Type, Accept, Authorization, X-Request-With');
    header('Access-Control-Allow-Credentials: true');

    if (!$request->isMethod('options')) {
        return $next($request);
    }
}

Now, in Angular js I have created post request to get Bearer token so it work perfect. I got token in response. Then I have stored it into session and use interceptor to set token in header for all request.

My controller looks like :

app.controller('LoginController',function($scope,$http,$window,$state) {
$scope.vm.login = function() {

    $http({
            method: 'POST',
            url: apiUrl+'auth/token',
            data: $.param($scope.vm.logDetails),
            headers: {'Content-Type': 'application/x-www-form-urlencoded'}
        }).then(function(response) {
            if(response.data.access_token) {
                $window.sessionStorage.setItem('userInfo-token', response.data.access_token);
                $state.go('dashboard.masters_userroles');                   
            }               
        });
     }
});

My factory looks like below :

.factory('tokenInjector',function($window){
return {
    //For each request the interceptor will set the bearer token header.
    request: function($config) {

        if($window.sessionStorage.getItem('userInfo-token'))
        {
            var token=$window.sessionStorage.getItem('userInfo-token');
            console.log(token);
            //set authorization header
            $config.headers['Accept'] = 'application/json'
            $config.headers['Authorization'] = 'Bearer '+token;

        }
        return $config;
    }
}
})
.config(function ($httpProvider) {
     $httpProvider.interceptors.push('tokenInjector');
})

When it calls $state.go('dashboard.masters_userroles'); this state then it gives an error like

MLHttpRequest cannot load http://api.local.support.com/api/masters/userroles?page=1. Response to preflight request doesn't pass access control check: No 'Access-Control-Allow-Origin' header is present on the requested resource. Origin 'http://local.support.com' is therefore not allowed access.

ssuhat · Accepted Answer · 2017-02-03 06:47:18Z

1

try use this package see if its resolve it:

https://github.com/barryvdh/laravel-cors

I use this package after fail making my own middleware too

answered Feb 3, 2017 at 6:47

ssuhat

7,70621 gold badges68 silver badges123 bronze badges

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

1 Comment

Nisarg Bhavsar Over a year ago

thanks its work. But Do you know why my cors middleware is not working? And how to prevent GET method converted into OPTION in angular js when use GET request method

Collectives™ on Stack Overflow

CORS header error when Angular use for front end and Laravel used for Backend

1 Answer 1

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related