javascript - Angular 2 - HTTP basic auth request unable to enter details - Stack Overflow

admin管理员组

文章数量:1332686

I've been trying multiple approaches to accessing an API that uses basic auth. The problem is Angular 2 is unable to enter the username and password.

If you navigate to a basic auth website, it will ask you to put in a username and password and then on most browser you click Log In or Cancel. If you click cancel on this website it will return a string saying User pressed Cancel, and that exactly what I am getting by doing it through Angular's HTTP request.

At this stage it doesn't even matter if the encode username and password in the Authorization header is correct, I just need to be able to send a username and password and have it try to login.

Any suggestions?

request() {
        let headers = new Headers();
        headers.append('Authorization', "Basic dWRpZDM6cGFzc3dvcmQ=");

        this.http.get('http://localhost:8888/api/', {
            headers: headers
        })
            .subscribe(
                data => this.example = data.text(),
                err => this.logError(err.text()),
                () => console.log('Request Complete')
            );
        console.log(this.example);
    }

I've been trying multiple approaches to accessing an API that uses basic auth. The problem is Angular 2 is unable to enter the username and password.

If you navigate to a basic auth website, it will ask you to put in a username and password and then on most browser you click Log In or Cancel. If you click cancel on this website it will return a string saying User pressed Cancel, and that exactly what I am getting by doing it through Angular's HTTP request.

At this stage it doesn't even matter if the encode username and password in the Authorization header is correct, I just need to be able to send a username and password and have it try to login.

Any suggestions?

request() {
        let headers = new Headers();
        headers.append('Authorization', "Basic dWRpZDM6cGFzc3dvcmQ=");

        this.http.get('http://localhost:8888/api/', {
            headers: headers
        })
            .subscribe(
                data => this.example = data.text(),
                err => this.logError(err.text()),
                () => console.log('Request Complete')
            );
        console.log(this.example);
    }

• javascript
• angular
• http
• authentication
• authorization

Share Improve this question Follow edited Mar 30, 2017 at 14:59 Luke Brown asked Mar 30, 2017 at 14:51 Luke BrownLuke Brown 1,89222 gold badges2929 silver badges5050 bronze badges 2

• Running this code returns There was an error: User pressed Cancel, as it is handed to my error handling function. – Luke Brown Commented Mar 30, 2017 at 14:52
• Have you tried using RequestOptions? For example, let opts: RequestOptions = new RequestOptions(); opts.headers = headers; this.http.get('path', opts).... – Emin Laletovic Commented Mar 30, 2017 at 15:25

Add a ment  | 

2 Answers 2

Sorted by: Reset to default 5

Adding authorization using username & password should help. Please try following :

      let username : string = 'username';
      let password : string = 'password';
      let headers = new Headers();
      headers.append("Authorization", "Basic " + btoa(username + ":" + password)); 
      headers.append("Content-Type", "application/x-www-form-urlencoded");
      this.http.get('http://localhost:8888/api/', {
        headers: headers
      }).subscribe(
            data => this.example = data.text(),
            err => this.logError(err.text()),
            () => console.log('Request Complete')
        );
    console.log(this.example);

Hope this helps.

The problem actually wasn't with Angular 2 or JS at all, the headers were been attached and sent. But Apache was not passing on the HTTP_AUTHORIZATION onto PHP.

To fix this I had to set the following in the .htaccess on the API directory:

<IfModule mod_rewrite.c>
RewriteEngine on
RewriteRule .* - [E=HTTP_AUTHORIZATION:%{HTTP:Authorization},L]
</IfModule>

and then I had to manually set the PHP_AUTH_USER and PHP_AUTH_PW.

list($_SERVER['PHP_AUTH_USER'], $_SERVER['PHP_AUTH_PW']) = explode(':', base64_decode(substr($_SERVER['HTTP_AUTHORIZATION'], 6)));
$data = array();

The other work around is to create a PHP or Node.js wrapper locally and send the parameters onto that page from angular, and then use that page to make a CURL request which also worked.

本文标签： javascriptAngular 2HTTP basic auth request unable to enter detailsStack Overflow