How to setup CSRF in JavaScript for laravel?

Question

I only use JavaScript.

And i know jQuery will set's the CSRF by,

  $(function() {
   $.ajaxSetup({
     headers: {
       'X-CSRF-Token': $('meta[name="_token"]').attr('content')
    }
  });
});

But how could i use "CSRF-Token" in JavaScript ?

Is there any possibilities for common setup for all Ajax Call ?

ajaxSetup sets headers with csrf token for every ajax request — Saravanan Sampathkumar
– Saravanan Sampathkumar, Commented Feb 22, 2017 at 5:01
You do understand that jQuery is Javascript, right? Are you asking how to add a CSRF token to an AJAX request's headers without using jQuery? — maiorano84
– maiorano84, Commented Feb 22, 2017 at 5:17

Sagar Arora · Accepted Answer · 2017-02-22 05:25:24Z

5

To use csrf token common for all the ajax calls you have put following code in your master layout blade file.

In layout header:

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

In your layout footer:

    <script type="text/javascript">   
    jQuery(document).ready(function() {       
        jQuery.ajaxSetup({        
            headers: {            
                'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')        
            }    
        });    
    });
</script>

This will work for all your ajax requests.

Thanks

answered Feb 22, 2017 at 5:25

Sagar Arora

1,7831 gold badge11 silver badges20 bronze badges

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

2 Comments

Shankar Thiyagaraajan Over a year ago

I only want for JavaScript, not for jQuery !

Sagar Arora Over a year ago

In javascript you have to set token oin headers for each request. Like xhr.setRequestHeader("X-CSRFToken", csrf_token);

Issac Nguyen · Accepted Answer · 2017-09-20 05:27:18Z

3

You can include layout header look same above

But if you want use pure javascript to include token you can use:

var xhttp = new XMLHttpRequest();
xhttp.open("POST", url , true);
xhttp.setRequestHeader("Content-type", "application/x-www-form-urlencoded");
xhttp.setRequestHeader("X-CSRF-TOKEN", document.head.querySelector("[name=csrf-token]").content );
xhttp.send(params);

Hope to help your code ^^

answered Sep 20, 2017 at 5:27

Issac Nguyen

611 bronze badge

Comments

Santosh Dangare · Accepted Answer · 2020-10-28 03:37:11Z

1

You can pass csrf token in ajax as like this:

   $.ajax({  
             url: "/user.php",  
             method:"post",  
             data: { 'user_id':user_id,
                    '_token': "{{ csrf_token() }}" }, 
             success:function(data){console.log(data);}
          });

edited Oct 28, 2020 at 3:37

answered Oct 21, 2020 at 10:38

Santosh Dangare

7551 gold badge7 silver badges16 bronze badges

Comments

Zulvan Ambrosius Sihaloho · Accepted Answer · 2022-11-01 04:33:16Z

0

I also have the same problem as you. But I have found the solution and you can take a look at this article How to include csrf_token() in an external js file in Laravel?. You just add a meta tag to your html

<meta name="_token" content="{{ csrf_token() }}">

And hopefully can help your problem.

answered Nov 1, 2022 at 4:33

Zulvan Ambrosius Sihaloho

72 bronze badges

Collectives™ on Stack Overflow

How to setup CSRF in JavaScript for laravel?

4 Answers 4

2 Comments

Comments

Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

2 Comments

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related