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

Question

Cross site ajax request 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. No 'Access-Control-Allow-Origin' header is present on the requested resource.

I have a basic understanding of the problem but not sure how to add a callback function with the request or if that is the best solution for this example. I put in the full request URL here just to make it easier to follow.

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

the error message clearly specifies that the server isn't allowing the origin.For cross site requests the server must return/specify the origin(s) that is allowed to request for resources.If you have control over the server please specify this header value in response or * for all. — Amit Kumar Ghosh
– Amit Kumar Ghosh, Commented Nov 9, 2015 at 6:17
Maybe I don't understand the problem then. I am running a local development server to learn JavaScript and Vue so I have control of the origin server I guess. I do not have control of the markitondemand.com server although if you put that url in the browser it does return a response. I thought by using JASONP it avoided the cross site protocol? Can you explain what I am missing? Thanks — BrioDev
– BrioDev, Commented Nov 9, 2015 at 15:37
Well that seems the way your sending the request is cross site, and the server isn't configured to do so. — Amit Kumar Ghosh
– Amit Kumar Ghosh, Commented Nov 9, 2015 at 16:16

Birch · Accepted Answer · 2017-06-16 14:05:05Z

2

I have almost zero understanding of networking, but I was able to get several remote apis to work using:

this.$http.jsonp

instead of

this.$http.get

answered Jun 16, 2017 at 14:05

Birch

2353 silver badges8 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Miguel Coder · Accepted Answer · 2017-07-29 09:10:00Z

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

If you don't have access to the server, and you don't want to run the script in the browser, then I think what you could do is use a headless browser like PhantomJS to navigate to the page, insert a script element into the dom that contains you script, execute the function and then return the data from the API. I could write the code out for you, but to be honest, it's a bit complex. You would have to know how to use node.js, and phantom.js. I've personally only used phantom.js for the Node 'html-pdf' package, but I'm sure with a little bit of reading you could figure out how to do it.

Christophe · Accepted Answer · 2015-11-11 12:31:05Z

-1

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

answered Nov 11, 2015 at 12:31

Christophe

1921 silver badge8 bronze badges

1 Comment

BrioDev Over a year ago

My understanding of AJAX is novice at best so I assumed that markitondemand would accept cross site since they are providing a free API. Perhaps that is not the case, or I am not formatting the request properly. I ended up using PHP for the request to them --- $returned = json_decode(file_get_contents($url), true); --- and then have vue call a local api that I created from their data. Thanks for replying though.

Collectives™ on Stack Overflow

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

3 Answers 3

Comments

Comments

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

Comments

Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related