Unable to add header authorization: basic user: password (base16) vue-resource


I have an application in VUE in which I make requests to two APIs, one is mine and the other is from a third party, with mine I have no problems, I can authenticate and make requests correctly, in the main.js I put defect an interceptor that will add to the authentication token:

Vue.http.interceptors.push((request, next) => {
  request.headers.set('Authorization', 'Bearer ' + localStorage.token)

Indeed everything is fine and he was able to authenticate me and make requests, the problem is with the other API that does not belong to me and I have to make requests to him after logged in, I have a welcome component that in the created I put a request get from this way:

created () {
this.$http.headers.common['Authorization'] = 'Basic xxxxxxx'

  headers: {
    'Authorization': 'Basic xxxxx',
    'Cache-Control': 'no-cache'        
.then(response => {

And this error throws me:

The api is protected by basic authentication, I can access it well through the browser or postman, I communicate the owner and has no blocked access outside the domain, it is simply that I can not send the header in any way, if I look at the network console I get this:

As you can see the header Authentication is not sent, but if I edit the header and add it manually:

Then the request that previously gave me 401 now returns status 200:

Please how can I add the header by vue-resource

asked by DVertel 02.08.2018 в 21:27

1 answer


I imagine that you use axios, I recommend you configure it on your own and you can create two HTTPs without interfering.

export const HTTP = axios.create({
  baseURL: process.env.API_URL,
  timeout: 300000,
  headers: {
    Authorization: 'Bearer ${store ? store.getters['auth/access_token'] : ''}',

export const HTTP_THIRD_PARTY = axios.create({
  baseURL: process.env.API_URL_THIRD_PARTY,
  timeout: 300000,
  headers: {
    Authorization: 'BASIC ....',

// other file or wherever you want
import {HTTP, HTTP_THIRD_PARTY} from './services'

export default {
  async mounted() {
    await HTTP.get(....)
    await HTTP_THIRD_PARTY.get(...)

In the same way you can add it to a Vue prototype

answered by 02.08.2018 в 21:41