Vue.js + Vue Resource No 'Access-Control-Allow-Origin'

Question

Ajax request for cross site with Vue.js 1.0 and Vue Resource. I get the following error: XMLHttpRequest cannot load http://dev.markitondemand.com/MODApis/Api/v2/Lookup/jsonp?input=NFLX&callback=handleResponse . The requested resource does not have an Access-Control-Allow-Origin header.

I have a basic understanding of the problem, but am not sure how to add a callback function with a request or if this is the best solution for this example. I have posted the full request URL here to simplify its execution.

new Vue({ el: '#stockList', data: function() { return { query: '', stocks: [] }; }, ready: function() { this.getStocks(); }, methods: { getStocks: function() { this.$http.get('http://dev.markitondemand.com/MODApis/Api/v2/Lookup/jsonp?input=NFLX&callback=handleResponse', function(data) { this.stocks = data; } ); } } }) 

Answer 1

I have almost no understanding of network connectivity, but I was able to get several remote applications using:

 this.$http.jsonp 

instead

 this.$http.get 

Answer 2

The "No Access-Control-Allow-Origin" header is usually a server problem. This means that the server is configured only to allow the person to access the API if the request comes from the same domain as the server. You either need to run the script from the website to which you are requesting data, or you need to change the server configuration to allow access to all domains.

If you do not have access to the server and you do not want to run the script in a browser, then I think you can use a browser without a header, such as PhantomJS, to go to the page, insert the script element in the dom that contains you script, execute function, and then return the data from the API. I could write the code for you, but to be honest, it's a little complicated. You will need to know how to use node.js and phantom.js. I personally used phantom.js for the Node package 'html-pdf', but I'm sure with a little reading you could figure out how to do this.

Answer 3

Set your local environment to http instead of https if you don't have control over dev.markitondemand.com.