在 Vuejs 中使用带有 Axios 的 HTTP 基本身份验证时出现 401 错误答案

【问题标题】：401 error using HTTP basic auth with Axios in Vuejs在 Vuejs 中使用带有 Axios 的 HTTP 基本身份验证时出现 401 错误
【发布时间】：2018-12-02 10:48:20
【问题描述】：

我正在开发一个 Vuejs 应用程序，该应用程序从 Apache Solr 索引中获取其数据，并且我的应用程序使用 Axios 与索引一起工作以建立连接。但是，添加了 HTTP 基本身份验证，我无法使身份验证正常工作。 Access-Control-Allow-Origin 标头在服务器上设置（它在将身份验证添加到索引之前工作），所以这不是问题。我正在尝试在axios.get() 的配置对象中使用auth 对象，如下所示：

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

我可以让 Postman 的查询正常运行，所以我知道我有正确的凭据。

从我从文档和其他示例中可以看出，我做得对，但我仍然收到 401 错误。

我还使用 Drupal 站点中的这个索引，在那里，用户 ID 和密码作为 URL 的一部分传递：

https://myusername:mypassword@my-solr-url.com/solr/my-solr-index/select?...

但这种方法在这里也行不通。为了使身份验证正常工作，我需要做些什么不同的事情？

【问题讨论】：

您在 axios 请求中将数据与配置混合在一起。配置对象应该是get请求的第三个参数：axios.get('http://example.com', {}, { auth: {...} })

标签： javascript http authentication axios basic-authentication

【解决方案1】：

试试下面的代码：

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

必须提供base64编码的用户名+':'+密码进行授权尝试。

【讨论】：

我试过这种方式，得到了GET http://localhost:8080/[object%20Object] 404 (Not Found) 我也试过axios({method:'get',url: 'https://my-solr-url.com/solr/my-solr-index/select')}，但仍然给我401错误。
我已经更新了我的代码，你可以试试更新的代码吗？并告诉我回应？另外，如果您从 Web 应用程序发送请求，请打开浏览器的开发人员工具，查看发送到服务器的请求标头并与邮递员标头进行比较。
是的，这就是我上面提到的我尝试过的（我再次尝试了，只是为了确保）。它给了我 401 错误。
@wonder95 你会试试我更新的答案吗？对于测试，您可以尝试任何在线工具将您的 USERNAME+':'+PASSWORD 转换为 base64 编码字符串，然后将其放在授权标头上。
尝试该代码会给我同样的 401 错误。 Postman 实际上是在发送该标头，因此我可以从那里复制粘贴（尽管我确实使用另一个编码工具进行了验证）。我不明白。

【解决方案2】：

我遇到了与您在 ExpressJS 应用程序中描述的相同的问题；带有auth: {username: 'user', password: 'pass'} 的 Axios 在浏览器中被 Axios 客户端的 401 拒绝，但来自 Postman 的 200 OK。你提到你正在设置Access-Control-Allow-Origin，我能够通过确保CORS 中间件在auth 中间件之前执行来解决这个问题。我注意到我的 Axios 客户端在 GET 请求之前发送了一个 HTTP OPTIONS 请求，这导致浏览器根据 CORS 策略进行阻止。

对于那些想知道如何根据@Inus 的建议手动计算 base64 编码字符串的人，可以使用btoa() JS 方法，但在浏览器中这仍然给了我一个 401（如预期的那样），因为这相当于 Axios ' 使用 auth 属性时计算的授权标头。

【讨论】：