Allow web users to access auth:api guarded routes.

[simensen]

I've been running into an issue with getting access to my API routes using my logged in user session via Axios. After a lot of debugging, it looked like I was only sending the X-CSRF-TOKEN header. My browser was not sending X-XSRF-TOKEN.

I was able to verify that my XSRF-TOKEN cookie was set, so I couldn't figure out what was wrong with interceptors.js.

Turns out interceptors.js is no longer being used?

I moved the related logic to spark-bootstrap.js near where the X-CSRF-TOKEN is added now. I'm now able to make Axios requests to my api routes without a problem.

If there is a better way for me to do this, let me know. I'm happy to update this patch as required.

[simensen]

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.

[taylorotwell]

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?

[themsaid]

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?

[themsaid]

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

[taylorotwell]

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

[themsaid]

@taylorotwell yes using the auth:api middleware.

[simensen]

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. :(

[simensen]

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

[simensen]

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. :)