Backbone.js - XMLHttpRequest не может загрузить

Question

Я использую backbone.js в качестве моей инфраструктуры javascript для своего проекта. Я получил эту ошибку при получении данных через 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; 
}); 

Мой заголовок API

header('Access-Control-Allow-Origin: *'); 
header('Access-Control-Allow-Methods: GET'); 

Я уже загрузить свой исходный код в GitHub: https://github.com/datomnurdin/izify-template

Демо: http://staging.revivalx.com/izify-template/

спасибо заранее.

Answer 1

Похоже, проблема CORS, вы не могли бы этого сделать только с клиентской стороны.

Для тестирования API CORS поддержки вы можете использовать test CORS

Таким образом, вы можете решить эту проблему:

1. Реализовать поддержку CORS на стороне сервера API.
2. Запросы прокси со стороны вашего приложения на API.
3. Используйте другой techics для кросс-происхождения политики, как (JSONP, и т.д ..)