Unable to decrypt CSRF/XSRF token in Laravel sent through Angular - php

Question

I am using the angularavel setup for my app. On my local setup i do not need to explicitly send the XSRF-TOKEN with the angular http request. And it works fine with laravel. I uploaded the same setup on the server and tried to login using my form and laravel throws a token mismatch error. Hence I checked the request payload in dev tools and found there is no XSRF-TOKEN header in the request,like I see on my local. I believe angular generates one by default and send it with every http request,but not sure why is it failing here.
I added the csrf token in angular based on this tutorial here using the meta tag method. my meta is
<meta name="csrf-token" content='<?php echo json_encode(csrf_token()); ?>'> // Also tried without encoding
In my .config I have
$httpProvider.defaults.headers.common['X-XSRF-TOKEN'] = $('meta[name=csrf-token]').attr('content');
If I use X-XSRF-TOKEN I get DecryptException in Encrypter.php line 142:Invalid data.
If I use X-CSRF-TOKEN I get Token Mismatch error. My request shows the token in the header(added below).
Accept:application/json, text/plain, */*
Accept-Encoding:gzip, deflate
Accept-Language:en-US,en;q=0.8
Connection:keep-alive
Content-Length:68
Content-Type:application/json;charset=UTF-8
Cookie:PHPSESSID=ySsuvCYycB-9IfZZ29kSF1
Host:demo.abc.com
Origin:http://demo.abc.com
Referer:http://demo.abc.com/hexa/public/
User-Agent:Mozilla/5.0 (Windows NT 6.1; WOW64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/42.0.2311.90 Safari/537.36 FirePHP/4Chrome
X-FirePHP-Version:0.0.6
X-Wf-Max-Combined-Size:261120
X-XSRF-TOKEN:InhRWmVjcUxZNWVMRWlrWmFXR09vbGdZT1M2Z284c0NqV2x2RWxaN0Mi -->token
Where am I commiting mistake? Also the defult token from angular seems to be integrated and a vry large string.whereas the one genrated by function is a small string.

Answer 1

This is what worked for me, I'll show you the relevant snippets.
In my template I have the following:
<script type="text/javascript">myApp.constant("CSRF_TOKEN", '<?= csrf_token() ?>');</script>
And I have a factory such as:
.factory('Product', function($http, CSRF_TOKEN) {
return {
// store a product
save : function(productData) {
return $http({
method: 'POST',
url: 'http://localhost/angularjs/public/api/products',
headers: {'X-CSRF-TOKEN': CSRF_TOKEN},
data: productData
});
},
}
});
This is all I needed to do to stop receiving csrf token related errors.

Answer 2

that lines in module angular work for me....
in module angularjs
$httpProvider.defaults.headers.post['X-CSRF-TOKEN'] = $('meta[name=_token]').attr('content');
$httpProvider.defaults.headers.post['X-XSRF-TOKEN'] = $('meta[name=_token]').attr('content');
$httpProvider.defaults.withCredentials = true;
i