Search code examples
javascriptjsonvue.jsvue-resource

Vue.js - can't load json data using vue-resource

I'm having trouble using vue-resource with some json data. I'm following the example here: https://github.com/vuejs/vue-resource/blob/master/docs/http.md

My vue-resource call looks like this:

  ready: function() {    
    this.$http.get('http://section.dynns.com/sections').then(function (response) {
      this.$set('data_list', response.data)
  });
},

See jsfiddle here: http://jsfiddle.net/greene48/yb5chmfr/

But, switching that api call for a different set of data seems to work: http://jsfiddle.net/greene48/92gfwqL3/

So, maybe there is something wrong with the json I'm trying to use? Any help would be appreciated. Thanks

Solution

  • http://jsonplaceholder.typicode.com/posts sets CORS headers. http://section.dynns.com/sections does not. Without CORS headers, your requests to a different domain name are subject to the browser's same-origin policy and will fail.

    Your other options are JSONP (if the API supports it) or proxying requests through a server-side script.