2015-11-09 1 views
5

Cross-Site-Ajax-Anfrage mit Vue.js 1.0 und Vue Resource. Ich erhalte den folgenden Fehler: XMLHttpRequest kann http://dev.markitondemand.com/MODApis/Api/v2/Lookup/jsonp?input=NFLX&callback=handleResponse nicht laden. Kein 'Access-Control-Allow-Origin'-Header ist auf der angeforderten Ressource vorhanden.Vue.js + Vue-Ressource Nein 'Access-Control-Allow-Origin'

Ich habe ein grundlegendes Verständnis des Problems, aber nicht sicher, wie Sie eine Rückruffunktion mit der Anfrage hinzufügen oder ob das die beste Lösung für dieses Beispiel ist. Ich habe hier die vollständige Anforderungs-URL eingegeben, um die Verfolgung zu erleichtern.

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

Die Fehlermeldung gibt eindeutig an, dass der Server den Ursprung nicht zulässt. Bei Cross-Site-Anfragen muss der Server die Herkunft (en) zurückgeben/angeben, die Ressourcen anfordern dürfen. Wenn Sie die Kontrolle über den Server haben, geben Sie dies bitte an dieser Header-Wert in Antwort oder '*' für alle. –

+0

Vielleicht verstehe ich das Problem dann nicht. Ich führe einen lokalen Entwicklungsserver, um JavaScript und Vue zu lernen, also habe ich die Kontrolle über den Ursprungsserver, denke ich. Ich habe keine Kontrolle über den markitondemand.com Server, obwohl wenn Sie diese URL in den Browser stellen, gibt es eine Antwort zurück. Ich dachte, mit JASONP vermieden das Cross-Site-Protokoll? Kannst du mir erklären, was ich vermisse? Danke – BrioDev

+0

Nun, scheint die Art und Weise, wie Sie die Anfrage Cross-Site ist, und der Server ist nicht konfiguriert, dies zu tun. –

Antwort

-1

Stellen Sie Ihre lokale Umgebung auf http statt auf https, wenn Sie keine Kontrolle über dev.markitondemand.com haben.

+0

Mein Verständnis von AJAX ist bestenfalls Anfänger, also nahm ich an, dass markitondemand Cross-Site akzeptieren würde, da sie eine freie API bereitstellen. Vielleicht ist das nicht der Fall, oder ich formatiere die Anfrage nicht richtig. Am Ende habe ich PHP für die Anfrage an sie verwendet --- $ returned = json_decode (file_get_contents ($ url), true); --- und dann vue rufen Sie eine lokale API, die ich aus ihren Daten erstellt habe. Danke für die Antwort. – BrioDev

1

Ich habe fast null Verständnis der Vernetzung, aber ich war in der Lage mehr Remote-Apis zu bekommen mit arbeiten:

this.$http.jsonp 

statt

this.$http.get 
0

„No Access-Control-Allow-Origin "Header ist normalerweise ein Problem mit dem Server. Dies bedeutet, dass der Server so konfiguriert ist, dass nur eine Person Zugriff auf die API erhält, wenn die Anforderung von derselben Domäne wie der Server stammt. Sie müssen entweder das Skript von der Website ausführen, von der Sie Daten anfordern, oder Sie müssen die Serverkonfiguration ändern, um den Zugriff auf alle Domänen zu ermöglichen.

Wenn Sie keinen Zugriff auf den Server haben, und Sie das Skript nicht im Browser ausführen möchten, dann denke ich, was Sie tun könnten, ist mit einem kopflosen Browser wie PhantomJS auf die Seite zu navigieren, einfügen ein Skript-Element in das Dom, das Sie Skript enthält, führen Sie die Funktion und dann die Daten aus der API zurück. Ich könnte den Code für dich schreiben, aber um ehrlich zu sein, ist es ein bisschen komplex. Sie müssten wissen, wie man node.js und phantom.js benutzt. Ich habe persönlich nur phantom.js für das Node-Paket 'html-pdf' verwendet, aber ich bin mir sicher, mit ein bisschen Lesen könntest du herausfinden, wie es geht.