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

Posted 2023-03-15

【中文标题】AngularJS 前端（带路由）结合 Laravel API 作为后端

【英文标题】：AngularJS frontend (with routing) combined with a Laravel API as the backend

【发布时间】：2014-12-26 07:24:13

【问题描述】：

所以在过去 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。我该如何解决这个问题？

【问题讨论】：

请详细说明您的问题是什么。我想不通

感谢帕特里克的反馈。我刚刚编辑了最后一部分，试图让问题更明显！

我不太确定你为什么要在你的 Laravel 项目中包含你的 Angular 客户端。我会让它们成为两个独立的项目

但是由于 CORS，我无法发送 API 请求？

如果您将它托管在同一个域上，这应该不是问题。如果没有，我在以下方面取得了成功：gist.github.com/anonymous/ea89706a2b00217151e3

【参考方案1】：

我不建议构建这样的混合应用程序。您应该将 Laravel API 后端与 AngularJS 前端分开。然后，您可以在 AngularJS 中设置服务来调用您的 API。 API 驱动的开发是必经之路。

如果你对 CORS 有问题，你可以修改 Laravel 响应中的标题来解决这个问题。要解决每个 Laravel 路由的问题，您可以在 routes.php 文件顶部的某处添加以下内容：

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

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

$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('/', ... );函数之后。