기본 인증을 사용하는 Vue 리소스

기본 인증을 사용하는 Vue 리소스

저는 Vue 2.0에서 기본 인증으로 API에 연결하는 Vue Resource를 사용하여 메서드를 작성했습니다.

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의 이러한 인증 자격 증명으로 저는 완벽하게 연결하고 데이터를 받을 수 있습니다.헤더에서 허가가 잘못 전달된 것 같습니다.

다음과 같이 시도해 보십시오.

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

로컬에서 테스트해 봤는데 인증키와 URL로 동작했어요.인증 키를 플레이스 홀더로 대체하고 기본 인증 자격 증명을 변경하십시오.

언급URL : https://stackoverflow.com/questions/42000051/vue-resource-with-basic-authentication