Angular2 Http Laravel CSRF Token

Question

Muddling through some Angular2 tutorials and trying to get a post request to work in Laravel 5.2 I have added this meta tag:

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

but I'm not sure how to pass that in the headers section or honestly if that is where it should go.

    let headers = new Headers({ 'Content-Type': 'application/json', 'X-CSRF-TOKEN': '???????' });

Update: So I added a function to pull the csrf-token from the meta tag but still have not found a way to get it passed to the Laravel post request.

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

Thanks

BrioDev · Accepted Answer · 2016-04-16 03:24:58Z

4

This is what I did. Not sure if it is the best way but it worked.

In the main Laravel template I added this meta tag.

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

In the Angular2 whatever.service.ts I added a get token function.

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

In the same service I added this to the post method.

let headers = new Headers({ 'Content-Type': 'application/json', 'X-CSRF-TOKEN': this.getToken()});

Laravel now accepts the post without the 500 Token Mismatch Error

Please chime in if there is a better solution!!

answered Apr 16, 2016 at 3:24

BrioDev

1052 silver badges12 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Benjamin M · Accepted Answer · 2016-04-16 00:14:15Z

0

This should be the same "problem" as with <title>{{ title() }}</title>: There's no component. This means: Angular won't/can't do any interpolation here. For the title tag the angular team provides an injectable Title service. For meta tags you've got to roll your own solution.

Have a look here: https://wijmo.com/blog/how-to-improve-seo-in-angularjs-applications/

They use document.querySelector to access the meta element and then setAttribute to manipulate its contents.

answered Apr 16, 2016 at 0:14

Benjamin M

24.7k34 gold badges135 silver badges211 bronze badges

1 Comment

BrioDev Over a year ago

Thanks Benjamin. The meta tag syntax is Laravel and it generates the token. I updated the question with a function to pull the token to Angular2 so I now have the token in Angular I just don't know how to pass it with the post request back to Laravel.

Collectives™ on Stack Overflow

Angular2 Http Laravel CSRF Token

2 Answers 2

Comments

1 Comment

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Linked

Related