It looks like this problem goes back to this commit at the end of January. Looks to be related to removing vue-resource? There is a mention of XSRF but I believe the actual implementation was never copied. It doesn't look like this section of code has changed much since then.

I'm not aware of any problems with this currently and haven't heard such from any other users. @themsaid: is it possible Beau is missing something in his templates? A meta tag? Can you try to recreate this issue?

Using a simple route:

Route::get('/users', function(){
        return auth()->user()->id;
    });

I was able to do this:

Vue.component('home', {
    props: ['user'],

    mounted() {
        axios.get('/api/users');
    }
});

All seems to be working fine, how can I replicate?

Also what errors are you getting?

@simensen axios automatically puts a X-XSRF-TOKEN header on all requests if the XSRF-TOKEN cookie was found, that's why we don't need to add it manually ourselves.

@themsaid you did this in Spark behind the API guard?

@taylorotwell yes using the auth:api middleware.

I can confirm a fresh spark install appears to work if I add something similar to routes/api.php. :(

I can see the XSRF-TOKEN Cookie exists. It works if I apply this patch. I guess I need to dig into axios to find out why it isn't doing this for me automatically. :(

I think I've located the source of the problem. I'll update this as soon as I have confirmation on a fix.

The problem seems to be coming from the fact that I'm using tightenco/ziggy. This issue looks to explain my problem: tighten/ziggy#64

After diving into Axios I found the part that automatically adds the X-XSRF-TOKEN header and added some debugging code. The problem came from isURLSameOrigin. config.url in this case was a Route object. This object can sometimes be coerced into being a string but isURLSameOrigin somehow isn't doing so. Therefore, the "object" is not considered the same origin.

This was my calling code:

var store_uri = this.owner.type === 'user'
  ? route('api.user.projects.store')
  : route('api.team.projects.store', {team_slug: this.owner.slug});

var form = this.form;
var owner = this.owner;

axios.post(store_uri, form)...

I added an explicit .toString() call and now it works:

axios.post(store_uri.toString(), form)...

Thanks for helping me figure this out. It was quite a pain in the ass since all signs seemed to indicate it should "just work." Someday I'd like to not run into freaky edge cases. :)