Question

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

Ionic serve在localhost：8100上，Laravel的工匠服务在localhost：8000上。根据我的阅读内容，我需要使用拦截器从我的应用程序访问API，因此我设置了一个拦截器来检查＆＃39; / api＆＃39;并使用localhost：8000，否则它将从默认的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' );
            };
    } ] )

这会影响我的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应用程序，但我找不到任何实现它们的示例。

Answer 1

您可以将其添加到laravel .htaccess文件

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

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

    } );

Answer 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

Answer 4

尝试使用laravel-cors插件。

从github页面：

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

尝试将Ionic App连接到Laravel API

4 个答案: