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

Question

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

Navigation

#1 by (1 votes)

2

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)
  next()
  })

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'

this.$http.get('https://pag.com/13906/dataserver/api/v1//xxxx', 
{
  headers: {
    'Authorization': 'Basic xxxxx',
    'Cache-Control': 'no-cache'        
  }})
.then(response => {
console.log(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

javascript api

asked by DVertel 02.08.2018 в 21:27

source

1 answer

consult a single distinct with condition Detect the moment entered in an Entry

score 1 · Answer 1

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