Vue Resource mit Basic Authentication

Question

Ich habe eine Methode in Vue 2.0 mit Vue Resource geschrieben, die sich mit einer API mit Basic Authentication verbindet.

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

Als ich dies im Browser laufen einfach ich eine "403 (Verboten)" Fehlermeldung in der Konsole.

Mit diesen Berechtigungsnachweisen in Postman kann ich Daten perfekt verbinden und empfangen. Ich habe das Gefühl, dass ich die Autorisierung falsch im Header übergebe.

Answer 1

Versuchen Sie es auf diese Weise tun:

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

ich es lokal getestet haben und es funktionierte mit Auth-Schlüssel und URL. Betrachten Sie Ersetzen Sie Ihren Auth-Schlüssel mit einem Platzhalter und ändern Sie Ihre grundlegenden Authentifizierung Anmeldeinformationen.