我可以在非SPA项目上使用Axios吗？

Question

I am feed up with ajax long style of sending request, I have used axios on an SPA project and its pretty cool, I checked on thee documentation to see how it works and works great, however if I try to make a request it tows an error of unauthenticated, i am using Laravel php framework as my code back-end, if I try to run this directly on ajax, it works, or on a normal form it works also.

Plus i don't have any authentication middle setup anywhere.

Here is a documentation to the library Axios Library

Here is my Sample code

axios.get('/home', {} , {
            'X-CSRF-TOKEN'    : "{{csrf_token()}}",
            'X-Requested-With': 'XMLHttpRequest',
            'Accept' : 'application/json',
            'Content-Type' : 'application/x-www-form-urlencoded',
        })
            .then(function(ressponse){
                console.log(success);
            })
            .catch(function(error){
                console.log(error)
            })
 });

I a only returning all the request in my controller and not special

So my Question is, is it a problem with axios, or laravel, or i can not just use axios without any SPA framework (eg react, vue etc.).

Thank you.

Answer 1

It's unauthenticated because you aren't setting X-CSRF-TOKEN in the headers.

You are setting a X-CSRF-TOKEN property on the config object, but that is meaningless.

axios.get('/home', {} , {
            headers: {
                'X-CSRF-TOKEN'    : "{{csrf_token()}}",
                // X-Requested-With is an ugly hack and you should use an Accept header instead of this (not as well as!)
                'X-Requested-With': 'XMLHttpRequest',
                'Accept' : 'application/json',
                // You're making a GET request. There is no request body to describe the content-type of.
                // 'Content-Type' : 'application/x-www-form-urlencoded',
            }
        })

Answer 2

if your axios config is in js file then you have to do below steps

1- you have to put this meta in your page layout header

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

2- and change

'X-CSRF-TOKEN'    : "{{csrf_token()}}",

to

'X-CSRF-TOKEN'    :document.querySelector('meta[name="csrf-token"]').getAttribute('content'),

in your js file

and test it, if it works then your problem was because of js file is not a blade file so {{csrf_token()}} in your axios config will not rendered by laravel to csrf token