Laravel 5.4、Passport 和 Angular 7 不能一起玩
Laravel 5.4, Passport, and Angular 7 not playing nicely together
我有一个使用 Laravel 5.4 构建的网站,我正在努力更新 UI。我想使用 Angular 7 朝着单页应用程序的方向前进。但是我一直在尝试向我的 API 端点发出请求,我一直收到 401 错误。我已按照此处的说明进行操作:https://laravel.com/docs/5.4/passport#consuming-your-api-with-javascript 将元标记添加到页面,进行了额外的设置,并开始使用 Angulars HTTP 库,就像这样
this.httpOptions = {
headers: new HttpHeaders({
'Content-Type': 'application/json',
'X-Requested-With': 'XMLHttpRequest',
'X-CSRF-TOKEN': this.meta.getTag('name=csrf-token').content
})
};
this.http.get('api/v1/people', this.httpOptions).subscribe((data: any) => {console.log(data); });
但是我继续收到 401 错误。另外这里还有 Kernel.php
protected $middlewareGroups = [
'web' => [
\App\Http\Middleware\EncryptCookies::class,
\Illuminate\Cookie\Middleware\AddQueuedCookiesToResponse::class,
\Illuminate\Session\Middleware\StartSession::class,
\Illuminate\View\Middleware\ShareErrorsFromSession::class,
\App\Http\Middleware\VerifyCsrfToken::class,
\Laravel\Passport\Http\Middleware\CreateFreshApiToken::class
],
'api' => [
'throttle:60,1',
'auth:api'
],
];
和Routes.php
Route::group(['middleware' => 'auth:api'], function(){
Route::group(['prefix' => 'api/v1'], function () {
Route::get('people', 'personController@apiIndex');
Route::get('person/{id}', 'personController@apiGetPerson');
Route::post('contactevent', 'contactEventsController@apiAddContactEvent');
});
});
如有任何意见,我们将不胜感激。
看来我误解了所提供的一些文档。当您想要使用您在网站上提供的 api 到 javascript 时,您不必将您的路由包含在 auth:api
组中以验证调用。 Laravel 而是将 cookie 与您的请求一起传递,此外不需要 CSRF,除非它是 POST 请求。我的解决方案是将我的路由移动到 auth
中间件组,如下所示:
Route::group(['middleware' => 'auth'], function () {
Route::get('api/v1/people', 'personController@apiIndex');
}
然后像这样重写我的 Angular HTTP 请求:
this.httpOptions = {
headers: new HttpHeaders({
'Content-Type': 'application/json'
})
};
this.http.get('api/v1/people', this.httpOptions).subscribe((data: any) => {console.log(data); });
一切都按预期进行。
我有一个使用 Laravel 5.4 构建的网站,我正在努力更新 UI。我想使用 Angular 7 朝着单页应用程序的方向前进。但是我一直在尝试向我的 API 端点发出请求,我一直收到 401 错误。我已按照此处的说明进行操作:https://laravel.com/docs/5.4/passport#consuming-your-api-with-javascript 将元标记添加到页面,进行了额外的设置,并开始使用 Angulars HTTP 库,就像这样
this.httpOptions = {
headers: new HttpHeaders({
'Content-Type': 'application/json',
'X-Requested-With': 'XMLHttpRequest',
'X-CSRF-TOKEN': this.meta.getTag('name=csrf-token').content
})
};
this.http.get('api/v1/people', this.httpOptions).subscribe((data: any) => {console.log(data); });
但是我继续收到 401 错误。另外这里还有 Kernel.php
protected $middlewareGroups = [
'web' => [
\App\Http\Middleware\EncryptCookies::class,
\Illuminate\Cookie\Middleware\AddQueuedCookiesToResponse::class,
\Illuminate\Session\Middleware\StartSession::class,
\Illuminate\View\Middleware\ShareErrorsFromSession::class,
\App\Http\Middleware\VerifyCsrfToken::class,
\Laravel\Passport\Http\Middleware\CreateFreshApiToken::class
],
'api' => [
'throttle:60,1',
'auth:api'
],
];
和Routes.php
Route::group(['middleware' => 'auth:api'], function(){
Route::group(['prefix' => 'api/v1'], function () {
Route::get('people', 'personController@apiIndex');
Route::get('person/{id}', 'personController@apiGetPerson');
Route::post('contactevent', 'contactEventsController@apiAddContactEvent');
});
});
如有任何意见,我们将不胜感激。
看来我误解了所提供的一些文档。当您想要使用您在网站上提供的 api 到 javascript 时,您不必将您的路由包含在 auth:api
组中以验证调用。 Laravel 而是将 cookie 与您的请求一起传递,此外不需要 CSRF,除非它是 POST 请求。我的解决方案是将我的路由移动到 auth
中间件组,如下所示:
Route::group(['middleware' => 'auth'], function () {
Route::get('api/v1/people', 'personController@apiIndex');
}
然后像这样重写我的 Angular HTTP 请求:
this.httpOptions = {
headers: new HttpHeaders({
'Content-Type': 'application/json'
})
};
this.http.get('api/v1/people', this.httpOptions).subscribe((data: any) => {console.log(data); });
一切都按预期进行。