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

所以你可以通过以下方式解决这个问题：

在API服务器端实施CORS支持。
从您的应用服务器端向API发出的代理请求。
使用其他技术来交叉来源政策，如（JSONP等等）

Backbone.js - 无法加载XMLHttpRequest

1 个答案: