尝试将 Ionic App 连接到 Laravel API答案

【问题标题】：Trying to connect Ionic App to a Laravel API尝试将 Ionic App 连接到 Laravel API
【发布时间】：2015-06-10 20:47:52
【问题描述】：

我正在构建一个 Ionic 应用程序并尝试使用 Laravel 5 作为我的 API。我已经准备好基本的用户登录/注册/忘记/重置 UI，并且正在学习如何使用 ngResource，但为了测试这一点，我想访问 Laravel 正在运行的本地主机。

Ionic 服务在 localhost:8100 上，Laravel 的工匠服务在 localhost:8000 上。根据我的阅读，我需要使用拦截器从我的应用程序访问 API，因此我设置了一个拦截器来检查“/api”并使用 localhost:8000，否则它将从默认本地主机中提取资源: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' );
            };
    } ] )

这会影响我的 Laravel 测试 API 端点：

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

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

这几乎可以工作，除了我得到一个跨站点脚本错误，我应该猜到会发生。

有没有更好的方法来实现这一点，以便移动应用程序可以在开发过程中使用 Laravel 的 RESTful API？如果不是，您如何绕过跨站点脚本错误？似乎人们正在使用 Laravel 作为 API 创建 Ionic 应用程序，但我找不到任何实现它们的示例。

【问题讨论】：

标签： angularjs laravel laravel-5 ionic-framework ionic

【解决方案1】：

你可以把它添加到你的 laravel .htaccess 文件中

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

【讨论】：

【解决方案2】：

您需要发送对初始 OPTIONS 请求的响应，然后在路由响应中包含 CORS 标头

首先，响应 OPTIONS 请求：

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


});

然后将这些标头包含在您的路由的每个响应中

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');

    } );

【讨论】：

您好，感谢您的回复。有没有更简单的方法来设置开发环境来执行这种类型的往返？在生产中这不会是一个问题，因为 Ionic 应用程序将拥有它的所有资产，我不会为它提供服务。所以当我到达端点时，我不应该得到这个错误。

【解决方案3】：

最初我无法让这个solution 工作，但事实证明我只需要创建临时文件夹。因此，为了便于使用，我将其放入 .bashrc 并从我的终端在一个单独的 Chrome 实例中打开，并禁用网络安全。

.bashrc 快捷方式

# 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

命令行

chromeDev

【讨论】：

【解决方案4】：

尝试使用laravel-cors 插件。

来自github页面：

laravel-cors 包允许您使用 ACL 样式的 per-url 配置发送跨域资源共享标头。

【讨论】：