Trying to connect Ionic App to a Laravel API - angularjs

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.