[#124] Cross Origin Error

system · March 8, 2018, 7:47pm

Migrated from Redmine #124 | Author: Anonymous
Status: Closed | Priority: Normal | Created: 2018-03-08

Cross-Origin Request Blocked: The Same Origin Policy disallows reading the remote resource at http://user-api.simplybook.me/. (Reason: CORS header ‘Access-Control-Allow-Origin’ missing).

I keep getting this error when trying to access the API. It is random. Sometimes it comes up and sometimes not. Other times I get a 503 “Service Temporarily Unavailable.” with this message.

Below is my code to access the API:

import { sbm, JSONRpcClient } from ‘./sbmConfig’;

let SBM = {
client: null
}

const companyLogin = ‘cyno’;
const sbmApiKey = sbm.apiKey;
let tokenExpired = null;

const getToken = () => {
let loginClient = getLoginClient();
return loginClient.getToken(companyLogin, sbmApiKey);
}

const getSbmClient = () => {
console.log(‘Getting SBM client.’);
SBM.client = getJSONRpcClient();

if (tokenExpired) {
    // This doesn't work
    SBM.client = getJSONRpcClient();
    console.log('Token Expired: Getting new token.', );
}
return SBM.client;

}

// LOGIN TO SBM
const getLoginClient = () => {
return new JSONRpcClient({
url: ‘//user-api.simplybook.me/login’,
onerror: function (error) {
alert(error);
console.log(‘Client Login Error @Calendar Actions’);
}
});
}

const getJSONRpcClient = () => {
let token = getToken();
return new JSONRpcClient({
‘url’: ‘//user-api.simplybook.me’,
‘headers’: {
‘X-Company-Login’: companyLogin,
‘X-Token’: token
},
‘onerror’: function (error) {
alert(‘Error: ‘+ error + ’ Message: ’ + error.message + ’ Code: ’ + error.code + ’ Token: ’ + token);
console.log(’%cGETTING CLIENT ERROR @SBM Calendar Actions’,‘color: greenyellow’);
if (error.code == -32600){
tokenExpired = true;
let newLoginClient = new JSONRpcClient({
url: ‘//user-api.simplybook.me/login’,
onerror: function (error) {
alert(error);
console.log(‘Client Login Error @Calendar Actions’);
}
});
let newToken = getToken();
SBM.client = new JSONRpcClient({
‘url’: ‘//user-api.simplybook.me’,
‘headers’: {
‘X-Company-Login’: companyLogin,
‘X-Token’: newToken
},
‘onerror’: function (error) {
alert('Error: ‘+ error + ’ Message: ’ + error.message + ’ was fired from repeat call to sbmLogin ’ + ‘Code: ’ + error.code + ’ Token: ’ + newToken);
console.log(’%cGETTING CLIENT ERROR @SBM Calendar Actions’,‘color: greenyellow’);
}
});
}
}
});
}

export {getSbmClient as default, getAsyncSbmClient};

THIS IS THE JSONRPC SETUP CODE

declare var jQuery: any;
declare var Exception: any;

export const sbm = {
apiKey: ‘cc92801171ff01c1d45d7675ef77300c4dd92909a795fbd81165b95b9284b4eb’
}

/**

JSON-RPC Client Exception class
@param String code
@param String message
*/
var JSONRpcClientException = function (code, message) {
this.code = code;
this.message = message;
}
JSONRpcClientException.prototype = jQuery.extend(JSONRpcClientException.prototype, {

/**
- Magic method. COnvert object to string.
- @return String
  */
  toString: function () {
  return ‘[’ + this.code + '] ’ + this.message;
  }

});

/**

JSON-RPC Client

@param Object options
*/
export const JSONRpcClient = function (options) {
this.setOptions(options);
this.init();
}
JSONRpcClient.prototype = jQuery.extend(JSONRpcClient.prototype, {

/**

Default options
*/
options: {
‘onerror’: function () {},
‘onsuccess’: function () {},
‘url’: ‘’,
‘headers’: {}
},
current: 1,
onerror: null,
onsuccess: null,
onstart: null,

/**

Init client
*/
init: function () {
this.onerror = this.getParam(‘onerror’);
this.onsuccess = this.getParam(‘onsuccess’);

this.initMethods();
},

/**

Init API methiods by url
*/
initMethods: function () {
var instance = this;
// get all methods
jQuery.ajax(this.getParam(‘url’), {
‘async’: false,
‘success’: function (data) {
if (data.methods) {
// create method
jQuery.each(data.methods, function(methodName, methodParams) {
var method = function () {
var params = new Array();
for(var i = 0; i < arguments.length; i++){
params.push(arguments[i]);
}
var id = (instance.current++);
var callback = params[params.length - 1];
var request = {jsonrpc: ‘2.0’, method: methodName, params: params, id: id};

                 var async = false;
                 if (jQuery.type(callback) == 'function') {
                 	async = true;
                 	params.pop();
                 }
                 
                 var res = null;
                 // API request
                 jQuery.ajax(instance.getParam('url'), {
                     'contentType': 'application/json',
                     'type': methodParams.transport,
                     'processData': false,
                     'dataType': 'json',
                     'cache': false,
                     'data': JSON.stringify(request),
                     'headers': instance.getParam('headers'),
                     'async': async,
                     'success': function (result) {
                         if (jQuery.type(result.error) == 'object') {
                             res = new JSONRpcClientException(result.error.code, result.error.message);
                             instance.onerror(res);
                         } else {
                             res = result.result;
                             if (jQuery.type(callback) == 'function') {
                         	    callback(res);
                             }
                         }
                         instance.onsuccess(res, id, methodName);
                     }
     	        });
                 if (!async) {
                 	return res;
                 }
     	    }

     	    instance[methodName] = method;
     	});
     } else {
         throw Exception("Methods could not be found");
     }
 }

});
},

/**

Set client options
@param Object options
*/
setOptions: function (options) {
this.options = jQuery.extend({}, this.options, options);
},

/**

Get client param, if param is not available in this.options return defaultValue
@param String key
@param mixed defaultValue
@return mixed
*/
getParam: function (key, defaultValue) {
if (jQuery.type(this.options[key]) != ‘undefined’) {
return this.options[key];
}
return defaultValue;
}

});

system · March 9, 2018, 1:58am

Anonymous wrote:

Here’s a screenshot of the error again combined with the cross origin and 503 errors. Some browsers only show the x-origin error others show both the x-origin and 503 together.

system · March 9, 2018, 10:19am

Dmytro Bondarev wrote:

You are getting 503 error because you are trying to make a lot of calls at the same time.
You have to cache data and try to minimize API calls.

We do not send origin headers on 503 error.

system · March 9, 2018, 3:40pm

Anonymous wrote:

Thanks!! That helps!

system · March 10, 2018, 2:34am

Anonymous wrote:

This was the problem. I had a component that was calling the API multiple times in fast succession. Thanks again!