Cuando llamo a la función sites.fetch() en la consola de Google, aparece este error 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. Lo leí y parece que necesito agregar algunos encabezados, pero no sé cómo agregar backbone.js.

Aquí mi código:

 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') })

Probé otras cosas pero no pude solucionarlo.