0

I know this has been asked, but I tried a lot of things and could not make this work.

I am making GET and POST request from my angular application to laravel backend api's. I am able to fetch json from get request but my POST request fails for json data type. It works for

x-www-form-urlencoded

but I am unable to extract data as it is in json format.

$http.get('http://api.app.mywebsite.com/users').success(function(data){
    $scope.user = data;
});

$scope.addUser = function(user){
    console.log($scope.user);
    $http({
        method: 'POST',
        url: 'http://api.app.mywebsite.com/users',
        dataType: 'json',
        data: $scope.user,
        headers: {'Content-Type': 'application/json; charset=utf-8' }
    }).then(function(result){
        console.log(result);
    }, function(error){
        console.log(error);
    })
}

$scope.user is posted on form submit.

The error I get :-

XMLHttpRequest cannot load http://api.app.mywebsite.com/users. 
Response     to preflight request doesn't pass access control check: 
No 'Access-Control-    Allow-Origin' header is present on the 
requested   resource. Origin 'http://app.mybackend.com' is therefore not     allowed access.

My CORS.php middleware in laravel :-

public function handle($request, Closure $next)
{
    header("Access-Control-Allow-Origin: *");

    // ALLOW OPTIONS METHOD
    $headers = [
        'Access-Control-Allow-Methods'=> 'POST, GET, OPTIONS, PUT, DELETE',
        'Access-Control-Allow-Headers'=> 'Content-Type, X-Auth-Token, Origin, X-Requested-With, Accept'
    ];
    if($request->getMethod() == "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 => $value)
        $response->header($key, $value);
    return $response;
    return $next($request);
}

routes.php

Route::group(['middleware' => 'cors'], function()
{
    Route::resource('users', 'UserController');
});
Stacy J
  • 2,463
  • 11
  • 47
  • 83
  • What exactly is "not working"? Are you receiving an error? Please be more clear about what you are expecting and what is actually happening. – Aken Roberts Dec 04 '15 at 19:27
  • I get the following error message "Response to preflight request doesn't pass access control check: No 'Access-Control-Allow-Origin' header is present on the requested resource." Have update my question. – Stacy J Dec 04 '15 at 19:30
  • what headers WERE sent with the preflight according to the browser? – Kevin B Dec 04 '15 at 19:32
  • Accept:*/* Accept-Encoding:gzip, deflate, sdch Accept-Language:en-US,en;q=0.8 Access-Control-Request-Headers:accept, content-type Access-Control-Request-Method:POST Connection:keep-alive Host:api.app.mywebsite.com Origin:http://app.mybackend.com Referer:http://app.mybackend.com/ User-Agent:Mozilla/5.0 (Windows NT 10.0; WOW64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/46.0.2490.86 Safari/537.36 – Stacy J Dec 04 '15 at 19:34

1 Answers1

0

Update: http://let-aurn.github.io/laravel-5-cors/

You need to configure your http server to allow cors Similar question: How to enable CORS in AngularJs

And: AngularJS performs an OPTIONS HTTP request for a cross-origin resource

Community
  • 1
  • 1
Rune Antonsen
  • 149
  • 1
  • 9