salesforce mobile sdk 5.0 CORS error while rest api using force.js

Question

I'm getting the CORS error while doing REST api call on Salesforce using the new force.js library.

I've also added question on Salesforce Dev Forum: https://developer.salesforce.com/forums/ForumsMain?id=9060G000000I2jbQAC

Code:

// Get salesforce mobile sdk OAuth plugin

var oauthPlugin = cordova.require("com.salesforce.plugin.oauth");

// Call getAuthCredentials to get the initial session credentials

oauthPlugin.getAuthCredentials(function(creds) {
    var params = {
        apiVersion: "v36.0",
        loginURL: creds.loginUrl,
        accessToken: creds.accessToken,
        refreshToken: creds.refreshToken,
        instanceUrl: creds.instanceUrl,
        appId: creds.clientId
    };
    force.init(params);

    force.query("SELECT MobilePhone, City, CompanyName, Country, CurrencyIsoCode, Email, FirstName, Name, LanguageLocaleKey, LastName, LocaleSidKey, Phone, State, Street, Profile.name, TimeZoneSidKey, Title, Id, PostalCode FROM User WHERE Id = 'xxxxxxxxxxx'", function(resp){
        console.log(resp)
    }, function(err){
        console.log(err);
    });
},
function(error) {
    alert('Failed to authenticate user: ' + error);
});

I've tried the following things:

1. Added headers:
xhr.setRequestHeader('Access-Control-Allow-Headers', '*');
xhr.setRequestHeader('Access-Control-Allow-Origin', '*');

2. Added metatag:
<meta http-equiv="Content-Security-Policy" content="default-src *; script-src '*' 'unsafe-inline'; style-src 'self' 'unsafe-inline'; media-src *; img-src 'self' data:">

3. Added options in config.xml:
<access origin="*" />
<access origin="*.my.salesforce.com" />
<access origin="*.force.com" />
<access origin="*.salesforce.com" />
<allow-navigation href="*" />

Answer 1

You did all the right configuration on the app side but you missed one on the Salesforce side. You need to register the app domain under

Setup: Administer > Security Controls > CORS

This should work. It is actually documented fairly well as part of the new force.js release.

(*) Starting in the Spring 15 release, some Salesforce REST APIs (like Chatter and sobjects) support CORS. To allow an app to make direct REST calls against your org, register the app domain in Setup: Administer > Security Controls > CORS.

ForceJS abstracts these differences and allows you to run your app in the browser and on device without code or configuration changes.

Answer 2

you can also add a simple chrome plugin https://chrome.google.com/webstore/detail/allow-control-allow-origi/nlfbmbojpeacfghkpbjhddihlkkiljbi

and enter your host. then it will also work.