When I call the function sites.fetch()
in the google console this error appears Cross-Origin Read Blocking (CORB) blocked cross-origin response https://api.nutritionix.com/v1_1/search?callback=jQuery351004426279547866718_1648579753369&\_=1648579753370 with MIME type application/json. See https://www.chromestatus.com/feature/5629709824032768 for more details.
i read about it and seems i need to add some headers but i don't know how to add on backbone.js.
Here my code:
App = {};
App.Site = Backbone.Model.extend();
App.Sites = Backbone.Collection.extend({
url: "https://api.nutritionix.com/v1_1/search",
model: App.Site,
fetch: function(options){
options = options || {};
options.dataType = 'jsonp';
Backbone.Collection.prototype.fetch.call(this, options);
}
});
App.LoadSites = Backbone.View.extend({
initialize: function(){
this.listenTo(this.collection, 'add', this.renderOne);
this.listenTo(this.collection, 'reset', this.renderAll);
this.listenTo(this.collection, 'sync', this.renderAll);
},
tagName: 'ul',
className: 'Sites',
render: function(){
this.collection.trigger('reset');
return this;
},
renderAll: function(){
this.$el.empty();
this.collection.forEach(this.renderOne);
},
renderOne: function(site){
loadSite = new LoadSite();
loadSite.model = site;
loadSite.render().$el.appendTo(loadSites.el);
}
});
App.LoadSite = Backbone.View.extend({
template: _.template('<p><strong><%= text %></strong></p>'),
tagName: 'li',
className: 'Site',
render: function(){
var innerHTML = this.template({text: this.model.get('text')});
this.$el.html(innerHTML);
return this;
}
});
var loadSite, sites;
$(function() {
sites = new App.Sites([]);
loadSites = new App.LoadSites({
collection: sites
});
loadSites.render().$el.appendTo('#back');
console.log('veiw rend')
})
I tried other things but I couldn't solve it.