Trying to connect Ionic App to a Laravel API

Question

I'm building an Ionic app and trying to use Laravel 5 as my API. I've got the a basic user signin/signup/forgot/reset UI in place and am learning how to use ngResource, but in order to test this I want to hit the localhost Laravel is running on.

Ionic serve is on localhost:8100 and Laravel's artisan serve is on localhost:8000. From what I've read I need to use an interceptor to gain access to the API from my app, so I set up an interceptor that checks for '/api' and uses localhost:8000, otherwise it will pull resources from the default localhost:8100.

angular.module('project.app.test', ['ngResource'])

    // Application configuration
    .constant('ConfigSettings', {
        ver: '0.1.0',
        env: 'dev',
        host: 'localhost',
        port: '8000',
    })

    // Interceptor
    .factory('API', ['ConfigSettings',
        function (ConfigSettings) {

            var service = {
                request: function (config) {

                    if (config.url.indexOf("/api") > -1) {
                        config.url = ConfigSettings.host + ':' + ConfigSettings.port + config.url;
                    }

                    return config;
                }
            }

            return service;
        }])

    .config(['$httpProvider', function ($httpProvider) {

        $httpProvider.interceptors.push('API');
    }])

    // RESTful API using ngResource
    .factory('User', ['$resource', function ($resource) {

        return $resource('/api/user/:id');
    }])

    // Create New User
    .controller( 'SignupController', [ '$scope', '$state', 'User',
        function( $scope, $state, User ) {

            var self = this;

            $scope.postData = {};

            $scope.createNewUser = function() {

                console.debug( $scope.postData );

                var user = new User($scope.postData);
                user.$save();

                //$state.go( 'login.index' );
            };
    } ] )

That would hit my Laravel test API endpoint:

Route::group( [ 'prefix' => 'api' ], function ()
{
    Route::get( 'user/{id}', function ( $id )
    {
        return "Hello User {$id}";
    } );

    Route::any( 'user', function ()
    {
        return 'Hello Any';
    } );
} );

This almost works except I get a cross-site scripting error, which I should have guessed would happen.

Is there a better way to implement this so the mobile app can use Laravel's RESTful API during development? If not how do you navigate around the cross-site scripting error? It seems like people are creating Ionic apps using Laravel as the API, but I can't find any examples of how they are implemented.

Answer 1

you can add this to your laravel .htaccess file

Header set Access-Control-Allow-Origin "*"

Answer 2

You need to send responses to the initial OPTIONS request and then include CORS headers to your responses from routes

First, responses to OPTIONS request:

Route::options('user/{id?}',function() use ($allowResponse)
{
    return (new Illuminate\Http\Response(null, 200))
    ->header('Access-Control-Allow-Origin', '*')
    ->header('Access-Control-Allow-Methods', 'GET')
    ->header('Access-Control-Allow-Headers', 'content-type, accept, x-requested-with'); // and any other headers you may send


});

Then include these headers with every response from your routes

Route::get( 'user/{id}', function ( $id )
    {
      return (new Response("Hello User {$id}", 200))
            ->header('Access-Control-Allow-Origin', '*')
            ->header('Access-Control-Allow-Methods', 'GET, OPTIONS');

    } );

Answer 3

Initially I couldn't get this solution to work, but it turns out I just had to create the temp folder. So to make this easy to use I dropped into .bashrc and open from my terminal in a separate Chrome instance with the web security disabled.

.bashrc shortcut

# Execute chrome with disable web security flag
open_chrome_xss() {
    cd '/c/Program Files (x86)/Google/Chrome/Application/'
    ./chrome.exe --user-data-dir="C:/temp/chrome/dev/session" --disable-web-security
}

# Open Chrome with XSS turned off for development
alias chromeDev=open_chrome_xss

command line

chromeDev

Answer 4

Try using the laravel-cors plugin.

From the github page:

The laravel-cors package allows you to send Cross-Origin Resource Sharing headers with ACL-style per-url configuration.