Question

我尝试使用Angular5在Laravel API路由的URL中发送POST值。但是，当我发送请求时，我的浏览器控制台中没有出现任何错误，但没有记录任何网络活动。这很奇怪，因为我可以在控制台中打印我的路线，它与我的API中的路线完全相同。我的路线是100％功能，因为它使用邮差。请帮忙......

这是我的最爱。

<button (click)="addFavorite(stationId)">Add to favorite</button>

这是我的最爱.component.ts

@Component({
  selector: 'add-favorite',
  templateUrl: './favorite.component.html',
  styleUrls: ['./favorite.component.css']
})
   export class FavoriteComponent implements OnInit {
      @Input() stationId: number;
      constructor(
    private favoritesService: FavoritesService,
    private route: ActivatedRoute,
    private router: Router
  ) {
this.route.params.subscribe( params => this.params = params);
  }

  observable: Observable<number>;
  params: Params;

  /*this.params['id']*/
  ngOnInit() {
  }

  addFavorite() {
    this.favoritesService.postFavorite(this.stationId);
  }
}

这是我最喜欢的服务

@Injectable()
export class FavoritesService {
private apiUrl = environment.apiUrl;
private user_id = 2;
  constructor(private http: HttpClient) { }

  postFavorite(stationId: number): Observable<number> {
    const url = `${this.apiUrl}/user/${this.user_id}/favorites/${stationId}`;
    console.log(url);
    return this.http.post<number>(url, {station_id: stationId});
  }
}

Take a look at my console output

这是我的Laravel API路线：

Route::post('user/{user_id}/favorites/{station_id}', 'FavoriteController@store');

Answer 1

确保您在请求中传递 CSRF令牌。

理想情况下，您可以编写拦截器来自动注入CSRF令牌，但对于该特定请求，您可以执行以下操作：

在您的刀片布局的<head>部分：

<meta property="csrf-token" name="csrf-token" content="{{ csrf_token() }}">

这会将您请求的相应CSRF令牌放在脚本的可访问位置。我建议您通过向根组件添加参数来传递值。

在您最喜爱的服务中：

postFavorite(stationId: number): Observable<number> {
   const url = `${this.apiUrl}/user/${this.user_id}/favorites/${stationId}`;
   console.log(url);

   let token = document.querySelector('meta[property="csrf-token"]')['content'];

   return this.http.post<number>(url, {station_id: stationId}, {
        headers: new HttpHeaders({
            'X-CSRF-TOKEN':  'application/json',
        })
   });
}

这会将<head>标记中的CSRF令牌添加到适当的标题中，并将其与您的请求一起发送。

您可以在此处找到有关Laravel中CSRF令牌的更多信息：Laravel - CSRF Protection

C＆＃39; ant使用Angular http将帖子发送到api路由

1 个答案: