Basic Authorization does not work with AngularJS $http setting headers...

[hughred22]

So I want to get login user info use WP-API backend and AngularJS front end (mobile app, NOT same domain). I installed WP-API Basic Authentication on my server side and test it with

curl --user muhua.hou:123123123 https://creatorup.com/wp-json/users/me It works and return the user json object. But when I implement this with AngularJS / IonicFramework, it return status code 400. Below is how I do it in AnguarJS

function linkUser(username, password) { var deferred = $q.defer();

    $ionicLoading.show({ template: "Loading..." });

    // Define the string
    var string = username + ":" + password;

    // Encode the String
    var encodedString = btoa(string);

    $http({method: 'GET', url: 'https://creatorup.com/wp-json/users/me', 
        headers: { 'Authorization': 'Basic ' + encodedString }
    })
    .success(function(data, status){
        $ionicLoading.hide();
        deferred.resolve(data);
    }).error(){
        console.log("Error while received data.");
        $ionicLoading.hide();
        deferred.reject();
    });
    return deferred.promise;
}

But it won't work. The error is: "XMLHttpRequest cannot load https://creatorup.com/wp-json/users/me. Invalid HTTP status code 400"

[HugoPoi]

Maybe linked to this https://github.com/WP-API/WP-API/pull/493 CORS doesn't support redirect

[hyyan]

@hughred22 @HugoPoi is there a way to solve this issue ?

[hyyan]

@hughred22 @HugoPoi I am sure it is WP-API problem , see https://github.com/WP-API/WP-API/pull/493

[hughred22]

@hyyan @HugoPoi Did you guys figure out a way to solve this?

[hyyan]

@hughred22 the problem divided into part here , the first part is the 400 error and that's because of CROS , to solve this part you have to include the following lines in your .htaccess file

# CORS Headers (add this for development purpose only )
# if you are using cordova or phonegap you don;t need this , they can handle CROS
<ifModule mod_headers.c>
    Header always set Access-Control-Allow-Origin: "*"
    Header always set Access-Control-Allow-Methods "POST, GET, PUT, DELETE, OPTIONS"
    Header always set Access-Control-Allow-Headers "X-Requested-With, content-type"
</ifModule>

# BEGIN WordPress (you should have this in your original WP .htaccess)
<IfModule mod_rewrite.c>
RewriteEngine On
RewriteBase /

# CORS OPTIONS (Important: add this too)
RewriteCond %{REQUEST_METHOD} OPTIONS
RewriteRule ^(.*)$ $1 [R=200,L]

Solution was taking from here http://blog.bulte.net/12-24-2013/angular-wordpress-cors.html and it worked for me perfectly

The second part is the redirect error , guys in WP-API have merged a PR claims to solve this issue but in fact it is one thas's causing this issue see this : https://github.com/WP-API/WP-API/pull/493

the solution around this is totally a hack :

Find the file lib/class-wp-json-users.php in the WP-API plugin , go to line 109 and remove the following :

$data = $response->get_data();

$response->header( 'Location', $data['meta']['links']['self'] );
$response->set_status( 302 );

That solved the problem for me now , If that is working for you too , let me know and please support me here https://github.com/WP-API/WP-API/pull/493

[enricodeleo]

UPDATE I solved removing the lines that check if the user is already logged in.

---

I'm trying to get this work on a ionic app. As for now, it works ONLY if I use --livereload (cordova's web app served from my pc's network IP) and in conjunction with corsproxy.

Even if I use corsproxy without livereload (cordova's web app served from file:// protocol) every authenticated response will be 403 forbidden.

The problem seems to be related to the file:// request even my config.xml allows origin from *.

Any ideas?

[mikeselander]

@hughred22 @enricodeleo Any luck on making this work in Angular? I'm also having issues with getting a constant 403 error and I'm positive that my credentials are correct & I'm on the same domain - can't figure it out for the life of me.