具有基本身份验证的 Vue 资源答案

【问题标题】：Vue Resource with Basic Authentication具有基本身份验证的 Vue 资源
【发布时间】：2017-02-02 10:42:41
【问题描述】：

我在 Vue 2.0 中使用 Vue Resource 编写了一个方法，该方法连接到具有基本身份验证的 API。

getCountries: function()
{
      options = {
          headers: 
          {
            'type'                        : 'GET',
            'Authorization'               : 'Basic c3VyZWJ1ZGR5LWFwaS11c2VyOkFwaTQzMjJTdXJlYg==',
            'Access-Control-Allow-Headers': 'Content-Type',
            'Access-Control-Allow-Methods': 'GET',
            'Access-Control-Allow-Origin' : '*',
            'dataType'                    : "json"
          }
      }
      this.$http.get('http://surebuddy.azurewebsites.net/Api/Products', [options])
      .then((response) => {
        console.log(response.body);
      }, (error) => {
        console.log(error);
      });
}

当我在浏览器中运行它时，我只是在控制台中收到 "403 (Forbidden)" 错误消息。

使用 Postman 中的这些授权凭据，我可以完美地连接和接收数据。我有一种感觉，我在标题中错误地传递了授权。

【问题讨论】：

Vue.js log API endpoint response with vue-resource的可能重复
您是否在浏览器控制台中验证了发送到 API 的实际请求？它真的与您的标头一起提供吗？查看关于 apache httpd-vhosts.conf Header set Access-Control-Allow-Origin "*" Header set Access-Control-Allow-Methods "GET, POST, PUT, DELETE, OPTIONS" Header set Access-Control-Allow-Headers "*, Authorization" 的最后 Leandro 评论

标签： javascript api basic-authentication vuejs2

【解决方案1】：

尝试这样做：

var options = {
    url: 'http://surebuddy.azurewebsites.net/Api/Products',
    method: 'GET',
    headers: 
    {
        Authorization: 'Basic [your auth key in encoded in base64 here]'
    }
}
this.$http(options).then((response) => {
            //...
});

我已经在本地对其进行了测试，它与您的身份验证密钥和网址一起使用。考虑用占位符替换您的身份验证密钥并更改您的基本身份验证凭据。

【讨论】：