Implementation Angularjs consuming data provided from Laravel using CORS

Asked

Viewed 1,138 times

2

I’m trying to create a web service in Laravel 4, which will be consumed by a mobile app using Angularjs. When I make AJAX requests with Angularjs, it gives Cross Domain error by being in another domain. How to resolve?

php laravel-4 laravel rest angularjs
  • 2

    Can you be more specific in your question? What you are trying to do and what problem happens to CORS?

  • My idea is to create a webservice in Laravel, and consume it in a mobile application using angular. The problem when I make ajax requests with the angular, it Cros Domain error by being in another domain.

  • I have incorporated your comment into the question. If you have more information to add, please edit your question.

  • I think the question can be reopened. Basically he is doing CORS with Laravel and Angularjs, which can be useful for many people.

  • @bigown, the original question was "how best to work with Laravel and Angularjs", mentioning a "difficulty with CORS". After Valmir clarified what he was trying to do, the question became specific and, in my view, valid.

2 answers

2

To enable CORS (exchange of data between different servers using AJAX), you need to make modifications to your client (Angularjs) and your server (Laravel).

Client (Angularjs)

In your Angularjs controller, change the attribute $http.defaults.useXDomain for true. You may also need to remove the header X-Requested-With, depending on the server. The configuration looks like this:

var myApp = angular.module('myApp', [
    'myAppApiService']);

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

(taken from http://better-inter.net/enabling-cors-in-angular-js/)

From there you can make the request normally within your controller:

$scope.fazRequisicao = function() {
  $http.get('http://aplicacao.com/servico')
    .success(function(data) {
      alert("OK");
    });
};

Because of this setting, your browser will inform the server of the domain from which the request is departing, via the HTTP header Origin.

Server (Laravel 4)

Also, in the server application, you should add a field to the header of the HTTP responses, Access-Control-Allow-Origin, indicating which domains may receive the response (or * for any domain).

In pure PHP, this can be done by including the following line at the beginning of the code:

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

This affects all your application’s HTTP responses, allowing them to be received on any domain. This is not a good security practice.

The recommended is you allow access to only a few controllers. For this, we controllers which will be used by your client application, use a filter to add the header to the replies Access-Control-Allow-Origin:

public function __construct()
{
    $this->afterFilter(function($response)<!-- language: lang-php -->
    {
        $response->headers->set('Access-Control-Allow-Origin', '*');
        return $response;
    });
}

(Source: http://acairns.co.uk/2013/01/routing-and-cors-with-laravel-4/)

0

  • Good tip, there is a lot in this post, thanks

  • Oops, for nothing. I’m also wanting to get into this world of SPA’s soon.

Browser other questions tagged php laravel-4 laravel rest angularjs

You are not signed in. Login or sign up in order to post.