angular js $http post with laravel

Question

Problem

When I try to POST data I get error. For sure I do something wrong, also im new at angular. When I do GET all work fine, but Im not sure how to do POST.

Controller

myApp.controller('createListController', ['$scope', '$log', '$http',
    function($scope, $log, $http){
        $http({
            method: 'POST',
            url: 'http://localhost:8888/lists',
            data: $scope.name
        })
    }]);

HTML

<form method="post" action="" >
    <label>List name</label>
    <input type="text" ng-model="name" name="name"  class="form-control" placeholder="Type list name" />
    <button type="submit" ng-model="submit" name="submit"  class="btn btn-primary form-control">Add list</button>
</form>

Laravel rout.php

Route::group(['middleware' => 'cors'], function () {
    Route::get('lists', 'ListsController@index');
    Route::post('lists', 'ListsController@store');
});

Laravel middleware

class Cors
{
    public function handle($request, Closure $next)
    {
        $response = $next($request);
        $response->headers->set('Access-Control-Allow-Origin', '*');
        $response->headers->set(
            'Access-Control-Allow-Headers',
            'Authorization, Content-Type, If-Match, If-Modified-Since, If-None-Match, If-Unmodified-Since'
        );
        $response->headers->set('Access-Control-Allow-Credentials', 'true');
        $response->headers->set('Access-Control-Allow-Methods', '*');
        return $response;
    }
}

Laravel kernel.php

    protected $routeMiddleware = [
        'cors' =>  \App\Http\Middleware\Cors::class,
    ];
}

Attempted to solve with

myApp.controller('createListController', ['$scope', '$log', '$http',
    function($scope, $log, $http){
        if ($scope.submit == true){

        $http({
            method: 'POST',
            url: 'http://localhost:8888/lists',
            data: {name: 'text'}
        })

        .success(function () {
            console.log('true');

        })
        .error(function(){
            console.log('false');
        })
        }

    }]);

But it's not working too. I don't know what I do wrong and how to post data right..

Error message

Error from console: XMLHttpRequest cannot load localhost:8888/lists. No 'Access-Control-Allow-Origin' header is present on the requested resource. Origin 'localhost'; is therefore not allowed access.

Question

How do I solve this error and get angular js $http post with laravel?

My opinion

I think there is something wrong in angular controller, it can't get data from form or something like that maybe.

just to say, you should put your actual http request in a service/factory and then call it in your controller — Joe Lloyd
– Joe Lloyd, Commented Sep 6, 2015 at 11:22
Error from console: XMLHttpRequest cannot load localhost:8888/lists. No 'Access-Control-Allow-Origin' header is present on the requested resource. Origin 'localhost' is therefore not allowed access. false — rincuuk
– rincuuk, Commented Sep 6, 2015 at 11:23
What is domain of the page you are sending your request from? — Alexandr Lazarev
– Alexandr Lazarev, Commented Sep 6, 2015 at 11:25

rincuuk · Accepted Answer · 2015-09-06 15:24:37Z

Solution

I got solution by my self. At 1st I make my angular controller work properly :

myApp.controller('createListController', ['$scope', '$log', '$http',
    function($scope, $log, $http ){

          $scope.addList = function () {
            var list = {
                name: $scope.listname
            };

        $http({
            method: 'POST',
            url: 'http://localhost/anydocopy/public/lists',
            data: list
        })

            .success(function () {
               console.log('true');
            })
            .error(function(){
                console.log('false');
            })
    }

    }]);

At 2nd I set ng-model parameter to input text and ng-click parameter to button:

<label>List name</label>
<input type="text" ng-model="listname" class="form-control" placeholder="Type list name" />
<button type="submit" ng-click="addList()" name="submit"  class="btn btn-primary form-control">Add list</button>

At 3rd with POST method domains can't be different (at least in angular), so I don't use localhost:8888, but use full path localhost/folder/.. and it worked for me. Now I can POST data from frontend to backend.

nomve · Accepted Answer · 2015-09-06 11:50:33Z

I've never used Laravel, but you'll need to add OPTIONS request to your rout.php, not just GET and POST.

Because you say that GET works, but not POST, I would think that it's an issue with simple and pre-flight requests. POST turns out to be a pre-flight request because Angular by default uses application/json as data type. From MDN about pre-flight requests:

It uses methods other than GET, HEAD or POST. Also, if POST is used to send request data with a Content-Type other than application/x-www-form-urlencoded, multipart/form-data, or text/plain, e.g. if the POST request sends an XML payload to the server using application/xml or text/xml, then the request is preflighted.

So either transform your POST data to be urlencoded, or have the server respond to OPTIONS requests as well. Which is a better way because you'll probably need pre-flight for one reason or another.

Collectives™ on Stack Overflow

angular js $http post with laravel

2 Answers 2

Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related