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

Question

我在 Vue 2.0 中使用 Vue 资源编写了一个方法，该方法连接到具有基本身份验证的 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 中的这些授权凭据，我可以完美地连接和接收数据。我有一种感觉，我在 header 中错误地传递了授权。

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

I've tested it locally and it worked with your auth key and url. Consider replacing your auth key with a placeholder and change your basic auth credentials.

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

Vue Resource with Basic Authentication

javascript

api

basic-authentication

vuejs2