Axios without CSRF and Requested with headers

Hi,

Using Laravel 5.5 and vue (I'm weak at JS) I'm making some axios requests that run both internally and externally to other content. The internal content is fine and needs CSRF tokens to protect our system. However the same CSRF are applied to external calls.

is there a way to keep using window.axios for internal calls and some other instance of axios kept for external requests?

Right now to get the externals working i've commented out the following:

bootstrap.js

window.axios = require('axios');

// window.axios.defaults.headers.common['X-Requested-With'] = 'XMLHttpRequest';

/**
 * Next we will register the CSRF Token as a common header with Axios so that
 * all outgoing HTTP requests automatically have it attached. This is just
 * a simple convenience so we don't have to attach every token manually.
 */
//
// let token = document.head.querySelector('meta[name="csrf-token"]');
//
// if (token) {
//     window.axios.defaults.headers.common['X-CSRF-TOKEN'] = token.content;
// } else {
//     console.error('CSRF token not found: https://laravel.com/docs/csrf#csrf-x-csrf-token');
// }

That solves all the external issues but removes protection on the system.

How can I make something like externalAxios to make external calls while keeping axios for internals?

Thanks in advance for your time.

theUnforgiven

8 years ago

Level 51

What about just adding your URI to the VerifyCsrfToken.php within app/Http/Middleware in the $except method?

1 like

robrogers3

8 years ago

Best Answer

Level 37

humm, I guess I'm stupid I thought external ajax calls were still limited to the host server. (unless pjax). Nope I'm not stupid. You can't do external ones. (Unless it's the same host, is it?).

Now if it is the same host, but not laravel. What error are you getting for the 'external' class when you include the CSRF token?

That said, you can remove the CSRF token on your axios request just before you call axios.get or post. do this: delete window.axios.defaults.headers.common['X-CSRF-TOKEN'];

after do this: window.axios.defaults.headers.common['X-CSRF-TOKEN'] = window.Laravel.csrfToken;

if you are doing mostly 'external' calls. remove this in bootstrap.js window.axios.defaults.headers.common['X-CSRF-TOKEN']

then for your internal calls add them for the request.

var config = {
  headers: {'X-My-Custom-Header': 'Header-Value'}
};

axios.get('https://api.github.com/users/codeheaven-io', config);

Roni

8 years ago

Level 33

Thanks for that, honestly I'm not sure and perhaps I'm misusing nomenclature. But I was using axios internally just for some easy for manipulation magic just to make the user interfaces a little more automatic for the users. Getting data as they respond to specific questions.

At some points I need to access API's externally, perhaps to get a list of JSON objects from a different service, both use cases used axios.get.

When I removed the headers the external just worked, however your solution allows me to do both.

I keep promising myself I'll dive into vue.js vanilla js and axios when time permits, instead of just backend work. It just seems like time never permits.

Thanks again. that was a life saver.

Roni

8 years ago

Level 33

@theUnforgiven thanks also, I'm sure that method will work, I haven't attempted it yet, I don't know what the best practise is in these cases. I just saw the code snippet and it worked, so I committed and moved on. But I'll give it a try at some point when the pressure lets up. Cheers.

Please or to participate in this conversation.