Vue Resource with Basic Authentication

Question

I wrote a method in Vue 2.0 with Vue Resource which connects to an API with Basic Authentication.

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

When I run this in the browser I simply get a "403 (Forbidden)" error message in the console.

With these authorisation credentials in Postman I can perfectly connect and receive data. I have a feeling that I'm incorrectly passing the Authorization in the header.

Possible duplicate of Vue.js log API endpoint response with vue-resource — Clorichel
– Clorichel, Commented Feb 2, 2017 at 11:07
Have you verified in your browser console for the actual Request that is sent to your API? Is it really provisioned with your headers? See last Leandro comment regarding 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" — Clorichel
– Clorichel, Commented Feb 2, 2017 at 11:09

Luke · Accepted Answer · 2017-02-10 11:21:06Z

6

Try doing it this way:

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.

edited Feb 10, 2017 at 11:21

answered Feb 10, 2017 at 10:54

Luke

2,4006 gold badges27 silver badges42 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

Vue Resource with Basic Authentication

1 Answer 1

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related