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

Question

我在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（禁止访问）”错误消息。

有了Postman中的这些授权凭证，我可以完美地连接和接收数据。我感到自己在标头中错误地传递了Authorization。

Answer 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) => {
            //...
});

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