CODEWITHSUNDEEP
angularjslaravelcors
muuk
muuk

Reputation: 932

AngularJS Cross Domain Post

I am trying to make an application using AngularJS and Laravel. However when I try to submit a form via $http in angular, I get the error: 

    XMLHttpRequest cannot load http://api.domain.com/api/route.
    No 'Access-Control-Allow-Origin' header is present on the requested resource.
    Origin 'http://localhost' is therefore not allowed access.

I have googled a lot and tried many things. I should note that GET requests to the api do work. Because it is going to be a phonegap app, I have to allow all domains in the access-control-allow-origin header. Here is my code:

    app.config(function($httpProvider) {
        $httpProvider.defaults.useXDomain = true;
        delete $httpProvider.defaults.headers.common["X-Requested-With"];
    });

    appControllers.controller("ownController", function($scope, $http){
        $scope.categories = [
            {id: 1, name: "jeMoeder"},
            {id: 2, name: "jeMoeder"},
            {id: 3, name: "jeMoeder"},
            {id: 4, name: "jeMoeder"},
            {id: 5, name: "jeMoeder"},
            {id: 6, name: "jeMoeder"},
            {id: 7, name: "jeMoeder"}
            ];

        $scope.add = function (hype) {
            $http({
                method: "POST",
                url: "http://api.domain.com/api/route",
                data: "author_email=" + hype.author_email + "&category=" + hype.category + "&short_desc=" + hype.short_desc + "&description=" + hype.description,
                headers: {
                    'Content-Type': 'application/x-www-form-urlencoded'
                }
            }).success(function (data) {
                console.log(data);
            });
        };
    });

    <section class="own">
        <div class="form container">

            <form data-ng-submit="add(hype)">
                <div class="input-container">
                    <input type="text" name="email" placeholder="Email"         class="input" data-ng-model="hype.author">
                </div>

                <div class="input-container">
                    <span class="input-label left">Category:</span>
                    <select name="category" class="input right" data-ng-model="hype.category">
                        <option data-ng-repeat="category in categories" value="{{category.id}}">{{category.name}}</option>
                    </select>
                    <div class="clearfix"></div>            
                </div>

                <div class="input-container">
                    <textarea name="eyecatcher" placeholder="Describe your hype, short!" class="input" rows="2" data-ng-model="hype.short_desc"></textarea>
                    <div id="count-overlay">Characters left: {{255-hype.short_desc.length}}</div>
                </div>

                <div class="input-container">
                    <textarea name="description" placeholder="In depth description of your hype..!" class="input" rows="8" data-ng-model="hype.description">        </textarea>             
                </div>

                <div class="controls">
                    <a href="#/" class="btn left btn-own-hype">Cancel</a>
                    <input type="submit" value="Send hype!" class="btn right btn-party">
                    <div class="clearfix"></div>
                </div>
            </form>

        </div>

    </section>

And on the server:

    App::before(function($request)
    {
        if($_SERVER['REQUEST_METHOD'] === 'OPTIONS') {
            $statusCode = 204;
            $headers = [
                'Access-Control-Allow-Origin'      => '*',
                'Access-Control-Allow-Methods'     => 'GET, POST, PUT, DELETE, OPTIONS',
                'Access-Control-Allow-Headers'     => 'Content-Type'
            ];

            return Response::make(null, $statusCode, $headers);
        }
    });

    App::after(function($request, $response)
    {
        $response->headers->set('Access-Control-Allow-Origin', '*');
        $response->headers->set('Access-Control-Allow-Methods', 'GET, POST, PUT, DELETE, OPTIONS');
        $response->headers->set('Access-Control-Allow-Headers', 'Content-Type');
        return $response;
    });

Upvotes: 1

Views: 7810

Answers (2)

muuk
muuk

Reputation: 932

Ok I found out how to do it. It was something with apache not accepting my headers. So I added this line to the .htaccess in laravel's public folder:

Header set Access-Control-Allow-Origin "http://myexternaldomain.com"

Hope this helps people out.

Upvotes: 4

Marcin Mikołajczyk
Marcin Mikołajczyk

Reputation: 731

send data like

$http({
                    method  : "POST",
                    url     : url,
                    data    : $.param({key: 'value', key2 : 'value'}),
                    headers : { 'Content-Type': 'application/x-www-form-urlencoded; charset=UTF-8' }
                })

and if your url is "localhost" then no wonder it doesnt work.. contact via your PCs(Servers) IP, eg 192.168.0.1

Upvotes: 2

Related Questions