Trouble with PouchDB-Cloudant and Ionic


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


<meta http-equiv="Content-Security-Policy" content="default-src *; style-src 'self' 'unsafe-inline'; script-src 'self' 'unsafe-inline' 'unsafe-eval'">

Also add this in my config.xml

<allow-navigation href="*" /> <allow-navigation href="http://*/*"/>

But still not working on device

Any idea ?

Thanks a lot

1 Like

Hi. I’m having the same problem. Did you manage to get it right?

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.:

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.

Hi, Josh thanks for responding.

My app is following your Pouchdb with Superlogin tutorial with a node server on Heroku (config variables is my Cloudant details).

When I connect to localhost with “ionic serve”. I can login and access my dbs on Cloudant. Everything works perfectly.

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:


    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);

    this.token = details.token;
    this.pass = details.password;


I think there’s an error in the SuperLogin config with that tutorial actually, you need to define permissions for users, i.e.:

  userDBs: {
    defaultDBs: {
      private: ['supertest']
    model: {
      supertest: {
        permissions: ['_reader', '_writer', '_replicator']

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).

1 Like

You are right about being logged-in in another tab. I logged out on the Cloudant website and now the issue is there when running “ionic serve” too.

As for my Superlogin config, I have the permissions defined exactly as you have posted above but the issue still persists.


Problem solved. The issue was with Cloudant (I dont know how or why :slight_smile: ). I recreated the DBs and everything is working now. Thanks Josh.