Не могу отправить сообщение в api route используя Angular http - PullRequest
Новая
       8

Не могу отправить сообщение в api route используя Angular http

0 голосов
/ 16 мая 2018

Я пытаюсь отправить значения на POST в URL-адресе маршрута Laravel API, используя Angular5.Однако, когда я отправляю запрос, я не получаю ошибок в консоли браузера, но сетевая активность не записывается.Это странно, потому что я могу напечатать свой маршрут в консоли, и он точно такой же, как в моем API.Мой маршрут на 100% функционален, потому что он работает с почтальоном.Пожалуйста, помогите ...

Вот мой любимый.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});
  }
}

Посмотрите на вывод моей консоли

Вот мой маршрут API Laravel: 

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

1 Ответ

0 голосов
/ 16 мая 2018

Убедитесь, что вы передаете CSRF-токен по вашему запросу.

В идеале вы должны написать перехватчик , чтобы автоматически вводить токен CSRF, но для этого конкретного запроса вы можете сделать следующее:

  • В разделе <head> макета Blade: 

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

Это добавит токен CSRF из тега <head> в соответствующий заголовок и отправит его с вашим запросом.

Более подробную информацию о токенах CSRF вы можете найти в Laravel здесь: Laravel - CSRF Protection

Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Нет похожих вопросов

...