I know about Axios, but I am trying to do this with Vue Resource. Everything is working fine but is not sending the headers.
No matter what I do, it won't send the headers.
However, when I execute the query and resend it with Firefox console (after adding the auth header) it does work.
But when executing directly from Vue it does not send the header. When I try to do the exact same thing in Postman, it does work :)
Question: Does anyone know how to solve this?
this.$http.get('https://myapi.com/v1/whatever/option', {
params: {
},
headers: {
'Authorization' : 'Bearer Cd34dfhnc4jn-39q84cq9-pwncpqw349fn83q47903qpnf98nghwehj5UiDXyC:$2y$1gerg34cqw4yas4yqOHAyLk4wy2OkDvxH6HOs.CgocO2TE9Te'
}
}).then(response => {
//console.log(response);
}, response => {
console.log('error:');
console.log(response.headers.get('Authorization'));
console.log(response);
})
P.S. I just tried Axios, and the same problem here... when I check my request, my added headers are NOT there!?
Download my FF Console screenshot
In my Vue file I have a @click event:
this.$http.get('https://boinu.nl/v1/synonyms/autos', {
// params: {
//
// },
// headers: {
// 'Authorization' : 'Bearer CdcmXCj0pdaM7UH6zpWVRSyncWJHhShHPKzvj4wWxNaxIn54LGQMaVU7ihUiDXyC:$2y$10$26IZut5mWqtECbhVIFnSqOHAyLk4wy2OkDvxH6HOs.CgocO2TE9Te'
// }
}).then(response => {
//console.log(response);
}, response => {
console.log('error:');
console.log(response);
})
and in my main.js I have:
import Vue from 'vue'
import App from './App.vue'
import VueResource from 'vue-resource'
Vue.use(VueResource);
new Vue({
el: '#app',
render: h => h(App)
});