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

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.

Answers:

Thank you for visiting the Q&A section on Magenaut. Please note that all the answers may not help you solve the issue immediately. So please treat them as advisements. If you found the post helpful (or not), leave a comment & I’ll get back to you as soon as possible.

Method 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.

Method 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


All methods was sourced from stackoverflow.com or stackexchange.com, is licensed under cc by-sa 2.5, cc by-sa 3.0 and cc by-sa 4.0

0 0 votes
Article Rating
Subscribe
Notify of
guest

0 Comments
Inline Feedbacks
View all comments
0
Would love your thoughts, please comment.x
()
x