C'ant post 使用 Angular http 将帖子发送到 api 路由

Posted 2023-03-13

技术标签:

【中文标题】C\'ant post 使用 Angular http 将帖子发送到 api 路由【英文标题】：C'ant post send post to api route using Angular httpC'ant post 使用 Angular http 将帖子发送到 api 路由 【发布时间】：2018-10-25 22:20:33 【问题描述】：

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

这是我最喜欢的.html

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

【问题讨论】：

【参考方案1】：

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

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

在 Blade 布局的 <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

【讨论】：

我试过了，但它说：`FavoriteComponent.html:1 ERROR TypeError: Cannot read property 'content' of null` 当我点击添加收藏按钮@DfKimera 似乎在您的页面上找不到<meta> 元素；你能确认它已被添加并出现在页面<head>中吗？这是在文件header.blade.php 中吗？这就是我写的我把它放在我发现的每个blade.php中，但仍然是同样的错误@DfKimera 尝试放置此标签：<script>window.CSRF_TOKEN = 'csrf_token()';</script> 然后将函数的第三行替换为：let token = window['CSRF_TOKEN'];

以上是关于C'ant post 使用 Angular http 将帖子发送到 api 路由的主要内容，如果未能解决你的问题，请参考以下文章

使用 Angular.js 的 HTTP POST

使用 Angular 2 向 API 发出 POST 请求时出错

Angular 1.4、POST、Spring Security、CORS

如何使用带有表单数据主体而不是 json 主体的 http 'POST'？（Angular2/打字稿）

Spring Boot + Angular 5 - http.post 空值

使用 Angular 7 使用 HTTP API 进行 POST 和命令错误标头丢失