Vue-resource: Passing headers

[briward]

Hi,

I've been trying to pass an authorization header to the http request and it doesn't seem to be working. I'm not entirely sure if this is the right way to do it, perhaps you know of a way to achieve this?

new Vue({

  el: '.container',

  ready: function() {

    this.fetchNode();

  },

  methods: {
    fetchNode: function() {

      this.$http.headers.common.Authorization = 'Basic YXBpOnBhc3N3b3Jk';

      this.$http.get('/node/1', function(node) {
        this.$set('node', node);
      });

    }
  },

});

Thanks!

[steffans]

You can set headers through the global config:

Vue.http.headers.common['Authorization'] = 'Basic YXBpOnBhc3N3b3Jk';

or when using the $http service through the options:

this.$http.get('/node/1', function(node) {
   // code ...
}, {headers: {'Authorization': 'Basic YXBpOnBhc3N3b3Jk'}});

[kamihouse]

Is there any way to remove the authorization field, or clear the common attribute?

[vladimirmyshkovski]

How to use headers with then ?
I don't know, where need setting this argument ...

By example, in this code:

          submitForm: function() {
            this.$http.post(this.submitendpoint, this.checkedItems).then(
               function(response){
                alert(response.data)
            }, function(error){
                console.log(this.$http.headers.common['X-CSRF-TOKEN'])
                alert(error.data)
            })
          },

If I try set common['X-CSRF-TOKEN'] globaly, this works, but i want to repeat this in the function. ?
How can i do this ?

Thanks!

[steffans]

Check out the second example here: https://github.com/pagekit/vue-resource/blob/develop/docs/http.md#example