I’m facing a problem to implement PouchDB / Cloudant on Ionic 2. I have followed the Josh Morony pouchdb tutorial and it works perfectly on ionic serve.
Then i have deployed on my Android device and nothing happened. No data are retrieved from Cloudant remote database.
I have this in my chrome inspect device console :
Failed to load resource: the server responded with a <my bluemix cloudant url> Failed to load resource: the server responded with a status of 403 (Forbidden)
After long research, i have also installed cordova whitelist plugin, and added the following meta in my
403 Forbidden error from Cloudant would indicate that the appropriate credentials haven’t been supplied. If this is a production DB then a valid user / API Key will need to be supplied with the request, i.e.:
https://username:password@bluemixurl.com
If you are testing an application in the same browser that you are logged into Cloudant, you will be given the permissions of whatever the account is that you are logged into Cloudant with. Since that is usually the admin account, you won’t run into any permission problems. When you then try to test outside of the browser you are logged in with, you are attempting to access a secured URL with no credentials and so it gets denied.
When I connect to localhost with “ionic serve”. I can login and access my dbs on Cloudant. Everything works perfectly.
However,
When I test the app on Android device, I can login perfectly (the session token shows up in the sl-users db on Cloudant). But nothing shows on the device and I get the following error in console:
Failed to load resource: the server responded with a status of 403 (Forbidden)
vendor.js:1705 ERROR Error: Uncaught (in promise): {"status":403,"name":"forbidden","message":"You are not allowed to access this db.","reason":"You are not allowed to access this db."}
at c (polyfills.js:3)
at polyfills.js:3
at t.invokeTask (polyfills.js:3)
at Object.onInvokeTask (vendor.js:4761)
at t.invokeTask (polyfills.js:3)
at r.runTask (polyfills.js:3)
at o (polyfills.js:3)
at XMLHttpRequest.invoke (polyfills.js:3)
I think the error lies in the db provider:
init(details){
this.db = new PouchDB('books');
this.remote = details.userDBs.books;
let options = {
live: true,
retry: true,
continuous: true
};
// This line is where I think the problem lies
this.db.sync(this.remote, options);
console.log(this.db);
console.log(this.remote);
console.log(details.password);
this.token = details.token;
this.pass = details.password;
}
As I mentioned, the reason it still works in the browser is likely because you are logged in with your admin account in that same browser (i.e. you have the database open in another tab).