How to add Authorization header in vueJs

Question

I'm trying to send a post request from a vuejs app to a spring backend with which I'm attaching a jwt authorization header.

I have tried with vue-resource

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

and the backend headers are like this

{accept-language=en-US,en;q=0.5, origin=http://localhost:8080, host=127.0.0.1:8084, access-control-request-headers=authorization, connection=keep-alive,...

But if i use postman to send the same request, the backend headers are like this

{authorization=Bearer eyJhbGciOiJIUzI1NiJ9.eyJqdGkiOiI1OTBhYWFmMjRhNjQ3ZjRiYmZlMDBhMDQiLCJzdWIiOiJiYmIiLCJpYXQiOjE0OTM5NzUxMDQsInJvbGVzIjoidXNlciIsImV4cCI6MTQ5Mzk3NTQ2NH0.kldUh3H1i3xEiNcxQ2ecq1HsjIIF5BI8Q-tb3sALc3E, content-length=0, accept-language=en-US,en;q=0.8,.......

My question is, how can i achieve the postman header using vuejs. I have tried with axios as well but without success.

Matija Župančić Matija Župančić · Accepted Answer · 2017-06-01T12:22:37

Try this way with axios. I'm using spring backend too and it works..

axios.post(
    url,
    query ,
    {headers: {
        "header name" : "header value"
      }}
    )
    .then((response) => {

      var response = response.data;

    }, (error) => {
       var error = error.response;
      }
    }
  )

How to add Authorization header in vueJs

1 Answers