401 error using HTTP basic auth with Axios in Vuejs

Question

I'm working on a Vuejs app that gets its data from an Apache Solr index, and I have had my app working with the index using Axios to make the connection. However, HTTP basic authentication has been added, and I am unable to get authentication to work. The Access-Control-Allow-Origin header is set on the server (it worked prior to adding the auth to the index), so that is not an issue. I am attempting to use the auth object in the config object in axios.get() like so:

const params = new URLSearchParams()
params.append('fl', 'label,bundle,entity_id,ss_language,url,is_product_slideshow')
  if (this.nodeType) {
    params.append('fq', 'bundle:' + this.nodeType)
  } else {
    params.append('fq', 'bundle:' + '(article OR document OR video OR product_display)')
  }
  params.append('fq', 'ss_language:' + this.language)
  params.append('fq', 'bs_status:' + 1)
  params.append('fq', '-is_field_restricted_to_internal_use:1')
  params.append('fq', '-is_field_restricted_to_author_of_as:1')
  params.append('fq', '-is_field_pp_confidential:1')
  params.append('fq', '-is_field_pp_do_not_show_item_on_t:1')
  params.append('q', qs)
  params.append('sort', 'is_sort asc')
  params.append('wt', 'json')
  params.append('rows', 10)
  params.append('start', queryStartRows)
  axios.get('https://my-solr-url.com/solr/my-solr-index/select', {
    params: params,
    withCredentials: true,
    auth: {
      username: 'myusername',
      password: 'mypassword'
    }
  })
  .then(response => {
    this.results = response.data.response.docs
    var numFound = this.numFound = response.data.response.numFound
    // Calculate last page.
    var numFoundRounded = Math.floor(numFound / 10) * 10
    var numPages = numFoundRounded / 10
    this.lastPage = numPages
  })

I can get the query to run fine from Postman, so I know I have the correct credentials.

From what I can tell from the docs and other examples, I'm doing it right, but I'm still getting a 401 error.

I also use this index from a Drupal site, and there, the user id and password are passed as part of the URL:

https://myusername:[email protected]/solr/my-solr-index/select?...

but that approach doesn't work here, either. What do I need to do differently to get the authentication to work?

You are mixing data with config in the axios request. The config object should be the third argument of the get request: axios.get('http://example.com', {}, { auth: {...} }) — Chris

Inus Saha Inus Saha · Accepted Answer · 2018-06-23T00:16:56

try the following code:

axios({
    method: 'get',
    url: 'https://my-solr-url.com/solr/my-solr-index/select',
    params: params,
    withCredentials: true,
    headers:{Authorization:'Basic '+BASE64ENCODED(USERNAME+':'+PASSWORD)}
})

You must provide base64 encoded username+':'+password for authorization and try.

401 error using HTTP basic auth with Axios in Vuejs

2 Answers