title: How to do HTTP Basic Auth using angular
body: <p>I'm building <code>ionic</code> app with <code>django rest framework</code> backend, And I can't do simple http basic auth.</p>
  
  <p>backend <code>view</code>:</p>
  
  <pre><code>class GetActive(APIView):
      permission_classes = (permissions.IsAuthenticated,)
  
      def get(self, request):
          settings = Setting.objects.filter(active=True)
          for setting in reversed(settings):
              headers = {'Access-Control-Allow-Origin': '*'}
              return Response({
                  'youtube_link': setting.youtube_link,
                  'text': setting.text}, headers=headers)
          return HttpResponse('not found')
  </code></pre>
  
  <p>frontend <code>api.ts</code>:</p>
  
  <pre><code>@Injectable()
  export class ApiProvider {
    url;
  
    constructor(public http: Http) {
      this.url = 'http://127.0.0.1:8000/get_active/';
    }
  
    getSettings() {
      var auth = window.btoa("foo:bar"),
          headers = {"Authorization": "Basic " + auth};
      return this.http.get(this.url, {headers: headers}).map(res =&gt; res.json());
    }
  }
  </code></pre>
  
  <p>I'm getting this error:</p>
  
  <pre><code>403 forbidden No 'Access-Control-Allow-Origin' header is present on the requested resource.
  </code></pre>
  
  <p>However, if I remove <code>IsAuthenticated</code> permisson on backend and remove headers from frontend request then it's working.</p>
  
  <p>To be confident that it is indeed working when <code>IsAuthenticated</code> is on, I make this python script:</p>
  
  <pre><code>import requests
  from requests.auth import HTTPBasicAuth
  
  theurl = 'http://localhost:8000/get_active'
  username = 'foo'
  password = 'bar'
  
  r = requests.get(theurl, auth=HTTPBasicAuth(username, password))
  print (r.text)
  </code></pre>
  
  <p>And it is working fine, so I just need js analog.</p>