Backbone.js - XMLHttpRequest cannot load - backbone.js

Question

I'm using backbone.js as my javascript framework for my project. I got this error when retrieve data through API.
XMLHttpRequest cannot load https://izify.com/api/izify-api/user/get_all_categories.php?merchantId=74718912a2c0d82feb2c14604efecb6d. No 'Access-Control-Allow-Origin' header is present on the requested resource. Origin 'http://staging.revivalx.com' is therefore not allowed access. staging.revivalx.com/:1
error SidebarView.js:23
XMLHttpRequest cannot load https://izify.com/api/izify-api/user/get_all_products.php?merchantId=74718912a2c0d82feb2c14604efecb6d. No 'Access-Control-Allow-Origin' header is present on the requested resource. Origin 'http://staging.revivalx.com' is therefore not allowed access. staging.revivalx.com/:1
error HomeView.js:23
SidebarView.js
define(['jquery', 'underscore', 'backbone','models/global/GlobalModel','collections/category/CategoryCollection', 'text!templates/sidebar/sidebarTemplate.html'], function($, _, Backbone,GlobalModel,CategoryCollection, sidebarTemplate) {
var SidebarView = Backbone.View.extend({
el: $("#sidebar"),
initialize: function() {
this.$el.off();
},
render: function() {
var that = this;
var global = new GlobalModel();
this.collection = new CategoryCollection();
var formValues = {
merchantId: global.merchantId
};
this.collection.fetch({
data: formValues,
success: function(collection, response) {
var template = _.template(sidebarTemplate,{
categories: that.collection.models
});
$("#sidebar").append(template);
},
error: function(collection, response) {
console.log("error");
}
});
}
});
return SidebarView;
});
HomeView.js
define(['jquery', 'underscore', 'backbone','models/global/GlobalModel','collections/product/ProductCollection','views/sidebar/SidebarView','text!templates/home/homeTemplate.html'], function($, _, Backbone,GlobalModel,ProductCollection,SidebarView, homeTemplate) {
var HomeView = Backbone.View.extend({
el: $("#page"),
initialize: function() {
this.$el.off();
},
render: function() {
var that = this;
var global = new GlobalModel();
this.collection = new ProductCollection();
var formValues = {
merchantId: global.merchantId
};
this.collection.fetch({
data: formValues,
success: function(collection, response) {
var template = _.template(homeTemplate, {
products: that.collection.models
});
that.$el.html(template);
},
error: function(collection, response) {
console.log("error");
}
});
var sidebarView = new SidebarView();
sidebarView.render();
},
});
return HomeView;
});
My API header
header('Access-Control-Allow-Origin: *');
header('Access-Control-Allow-Methods: GET');
I already upload my source code in github : https://github.com/datomnurdin/izify-template
Demo: http://staging.revivalx.com/izify-template/
Thanks a lot in advance.

Answer 1

Seems like CORS problem, you could not sove this with client side only.
To test API CORS support you can use test CORS
So you can solve this by:
Implement CORS support on API server side.
Proxy requests from your app server side to API.
Use another techics to cross-origin policy like(JSONP, etc..)