Question

所以我在过去7天左右的时间里一直试图找到解决问题的方法。我几乎放弃了这一点，所以这是我解决这个问题的最后一次尝试。

我正在尝试构建一个从我的Laravel API后端获取配方的配方站点（即 api / recipes 返回MySQL数据库中的所有配方）。通过$ http-service从AngularJS前端请求数据，到目前为止一直很好。

像这样的单页应用程序不是问题，因为我已经像这样定义了Laravel中的路由。所有未发送到RESTful API的HTTP请求都会重定向到我的索引视图，我希望AngularJS从那里接管路由。

Route::get('/', function()
{
    return View::make('index');
});

Route::group(array('prefix' => 'api'), function() {
  Route::resource('recipes', 'RecipeController',
        array('except' => array('create', 'edit', 'update')));
  Route::resource('ingredients', 'IngredientController',
    array('except' => array('create', 'edit', 'update')));
  Route::resource('nutrients', 'NutrientController',
    array('except' => array('create', 'edit', 'update')));

  Route::resource('IngredientsByRecipe', 'IngredientsByRecipeController');
});

App::missing(function($exception)
{
    return View::make('index');
});

我希望用户能够编辑现有食谱，创建新食谱等。因此，我已经在Angular中创建了这些路线：

var recipeApp = angular.module('recipeApp', [
  'ngRoute',
]);

recipeApp.config(['$routeProvider',
  function ($routeProvider) {
    $routeProvider
      .when('/', {
        templateUrl: 'list.html',
        controller: 'MainCtrl'
      })
      .when('/edit/:recipeId', {
        templateUrl: 'detail.html',
        controller: 'EditCtrl'
      })
      .when('/new', {
        templateUrl: 'detail.html',
        controller: 'CreateCtrl'
      })
      .otherwise({
        redirectTo: '/'
      });
  }
]);

不幸的是，即使在Angular中使用此路由，我似乎无法使其工作。我已经看到类似的问题通过解耦应用程序和类似的东西来解决，我已经通过在端口8888运行我的Angular前端和在端口8000的Laravel后端尝试了类似的东西，但后来我遇到了问题与CORS。

我渴望让它发挥作用，但似乎无法弄清楚如何让它发挥作用。似乎浏览器忽略了Angular路由并且只使用Laravel路由，这意味着我只能访问索引视图或API。我该怎么解决这个问题？

Answer 1

建立像这样的混合应用是我不推荐的。您应该将Laravel API后端与AngularJS前端分开。然后，您可以在AngularJS中设置服务以调用您的API。 API驱动的开发是可行的方法。

如果您在使用CORS时遇到问题，可以修改Laravel响应中的标题以解决此问题。要解决每个Laravel路由的问题，您可以在routes.php文件的顶部添加以下内容：

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

或者（如果您希望所有路线都有更好的解决方案），请将其添加到after中的filters.php过滤器中：

$response->headers->set('Access-Control-Allow-Origin', '*');

或者您可以设置单独的过滤器：

Route::filter('allowOrigin', function($route, $request, $response) {
    $response->header('Access-Control-Allow-Origin', '*');
});

现在，回答你的问题......

在index文件的头部（对于Angular），添加<base href="/">，并在Angular配置中添加$locationProvider.html5Mode(true);;您可以将它放在$routeProvider.when('/', { ... });功能之后。

AngularJS前端（带路由）与Laravel API结合作为后端

1 个答案: