JSONP und Callback-Funktion zur Vermeidung von cross domain Problemen

  • Der folgende Link verweist auf eine JSON.Datei:

    https://api.weatherlink.com/v1…02bc5272033001d0a002bc527


    Ich möchte diese Datei mit reinem Javascript abholen und einzelne Elemente (z. B. wind_dir und windchill_c) in HTML ausgeben.

    Um cross-domain Probleme zu vermeiden müsste man wohl mit JSONP und callback-Funktion arbeiten.

    Etwa so: <script src="https://api.weatherlink.com/v1/NoaaExt.json?user=001D0A00DE6A&pass=DEMO&apiToken=demo0a002bc5272033001d0a002bc527&callback=processData"></script>


    Kann mir jemand ein lauffähiges Code-Beispiel liefern?


    Vielen Dank im Voraus! :)

  • Hallo,


    anbei mein misslungener Versuch:


    VG,

    Anton



  • Bei mir blockt dir Cors auch.

    Das ist auch nee Api die Geld kostet oder ?

    Aber wie auch immer , verstehe nur nicht warum die Demo geblockt wird.


    Vieleicht solltest du auch mal nee andere Api suchen , weil Anbieter gibt es genug die auch nix kosten.


    Du kannst auch die CORS umgehen .

    Wenn du das gemacht hast dann würde der Code zur Abfrage so laufen.


  • Danke für das Beispiel basti1012!


    Ich kann nur diese Api verwenden. Denn auf dem Davis-Wetterserver (weatherlink.com) liegen die Daten meiner Wetterstation, die dort permanent gespeichert werden.

    Was meinst du mit "Du kannst auch die CORS umgehen"?

    Wie denn???

  • Du könntest erstmal versuchen den Link auszutauschen und deinen Api Link darein setzen.

    Kann sein das da wieder alles geht und die Links nicht Cors gesperrt sind.

    Wenn das ja mit zu der Wetterstation gehöhrt sollte das eigentlich ja nicht gesperrt sein, wäre ja irgendwie nicht sinn der sache.


    der Demo Link könnte auch gesperrt sein weil dann würde den ja jeder nutzen.

    Teste das erstmal mit deinen Api Link.

    Den Code von mir und einfach denl Link tauschen.


    Kannst du auch Php nutzen ?

    Damit könnte es auch gehen. ( Ich teste das mal gerade ).



    Cors umgehen mache ich auch nur zum testen, weil ich kein Plan habe wie weit man da einen auf Sack bekommen kann wenn man das ständig macht.


    EDIT:

    Wenn du Php nutzen kannst dann geht es auch so.

    Der Kiest jetzt die ganze Api aus, da must du halt nur das rausholen was du brauchst

  • Vielen Dank basti1012 für die Infos und das Php-Beispiel, welches ich aber leider nicht nutzen kann.


    Ich habe gegoogelt, dass man mit JSONP durch den Missbrauch eines Script Tags die same origin policy umgehen kann. Hab da mal eine Info beigefügt (JSONP.jpg).


    Helfen würde auch wenn der angefragte Server einen CORS Header setzen würde, oder?


    Meinen persönlichen Link hab ich leider noch nicht. Da das Teil nicht gerade billig ist (Weatherlink IP.jpg) wollte ich vorher erst einmal über die Demo testen ob die API überhaupt funktioniert. Eine Demo zu blockieren macht aus meiner Sicht ja eigentlich keinen Sinn. Ich weiß, dass man auch vorgefertigte Auswertungen vom Davis-Wetterserver abholen kann. Aber ich möchte halt die Rohdaten haben um mein eigenes Layout gestalten zu können.

  • Ja ich weiß nicht mehr weiter.

    Wenn ich es mit jsonp mache bekomme ich kein Error mehr , aber eine Warnung mit ähnlichen Fehlern.

    Da sollte sich jetzt mal einer melden hier der von JSON mehr Ahnung hat.

    Mit Googeln kam ich auch nicht weiter.


    Habe ein PHP Script gefunden, womit man das auslesen kann

    * Link entfernt, weil existiert nicht mehr *

    Sieht recht nett aus.

    Aber mit Javascript klappt es nicht .


    Da muss jetzt mal einer dran der mehr Ahnung von den JSON Kram hat

  • Was so eine eigentlich kleine Anforderung doch für Probleme machen kann... ||


    Ich habe gerade erfahren, dass man anstatt einer JSON.Datei auch ein XML.File erhalten kann.

    Würde das etwas ändern?

    Oder wäre die Problematik mit CORS dieselbe?

  • Der Link der xml Api ist der hier

    https://api.weatherlink.com/v1…02bc5272033001d0a002bc527


    Den hatte ich beim Googeln auch schon gefunden.

    Mit Php ist das auch kein problem , nur mit JS habe ich da noch nicht getestet weil ich ja hoffe das sich huer mal einer meldet der mehr mit json gearbeitet hat und weiß warum bzw was ich falsch mache warum es nicht geht.


    Ich teste das nacher mal mit den xml ob das klappt.

    Warum kannst du den kein PHP nutzen ?

    Ich kenne die Wetterstation ja nicht , desdhalb frage ich mich auch wie das geht ?


    Du kaufst das und stellst die Station bei dir zu hause auf ?

    Um abzufragen was die Station messen tut mußt du über so nee Api arbeiten oder wie geht das alles genau ?

    Erstellt die Wetterstation die Api oder geht das alles über die Anbieter Seite ?


    Ich kenne das nicht deshalb frage ich.

    Wenn ich mir sowas kaufe hoffe ich ja das man das auch ohne Internet Abfragen kann.

    Man merkt das ich das nicht kenne oder ?


    Wie gesagt ich teste das nochmal und hoffen wir das sich noch einer meldet der mehr ahnung von JSON oder JSONP hat.

    Ansonsten schreibe ich dich dann Privat an und sage dir wie man zum testen das anders macht

  • Okay basti1012, dann will ich dich mal über die Wetterstation informieren.....


    Die Funk-Wetterstation Vantage Pro 2 mit vielen Sensoren wie Temperatursensor, Feuchtigkeitssensor, Regenmesser, Windrichtungs und -geschwindigkeitssensor, UV-Sensor, Solar-Sensor und v. m. steht bei mir im Garten. Natürlich kann ich alle Messwerte auf einer großen Konsole (Monitor) beobachten. Auch Höchst- und Tiefwerte des Tages, des Monats und des Jahres kann ich genauso wie graphische Verläufe über die Konsole abrufen.


    Weatherlink ist eine optionale Ergänzung der Wetterstation. Es besteht aus einem internettauglichen Datenlogger und einer Software. Der Datenlogger wird an die Konsole und den Router angeschlossen. Mit der Software können die Wetterdaten an den PC übertragen und ausgewertet und auch an eine Homepage übergeben werden. Der IP - Datenlogger übergibt die Daten jedoch nicht nur an den PC, sondern auch an die Internet-Wetterhomepage der Fa. Davis (http://www.weatherlink.com).


    Warum brauche ich dann überhaupt die Weatherlink API? Ganz einfach: Um auf einer eigenen Webseite immer aktuelle Messwerte anzeigen zu können müsste der PC ständig laufen um die Daten upzuloaden. Das möchte ich verhindern und stattdessen die aktuellen Messwerte lieber beim Laden der Webseite von weatherlink.com abholen.


    Ich hoffe ich habe das alles einigermaßen verständlich erklärt. Anbei ein Foto von der Konsole der Wetterstation.

    Ach ja, PHP kann ich nicht nutzen weil es nicht in meinem Hostingpaket enthalten ist. Natürlich könnte ich ein Upgrade machen. Aber dann würde es teurer werden und bisher kam ich mit Javascript ganz gut zurecht.

  • Hey,


    Anton : Es kommt in der Konsole folgende Fehlermeldung: Quellübergreifende (Cross-Origin) Anfrage blockiert: Die Gleiche-Quelle-Regel verbietet das Lesen der externen Ressource auf https://api.weatherlink.com/v1…02bc5272033001d0a002bc527. (Grund: CORS-Kopfzeile 'Access-Control-Allow-Origin' fehlt)


    Dieser Feher kommt von dem Header Access-Control-Allow-Origin.


    Frage den Support von Weatherlink. Sie können dir sicher weiterhelfen.


    Grüße,

    Stef



  • Ok das erklärt dann auch meine Fragezeichen im Kopf die ich noch hatte.

    Was hast du den für einen Anbieter der kein Php nutzt ?

    Selbst Kostenlose Anbieter wie bplaced hat Php.

    Bist du sicher das du kein Php hast , oder hast du es einfach noch nicht getestet ?


    Zum teste kannst du ja mal nee Datei erstellen " test.php "

    PHP
    <?php
    phpinfo();
    ?>

    Dann siehst du ob du Php hast

    Mit Php ist das alles kein problem mehr.


    Ich verstehe auch nicht warum die Test Apis nicht laufen mit JS, irgendwas mache ich noch falsch glaube ich.

  • Stef:

    Danke, aber dieser Fehler war von Anfang an bekannt.

    Die Frage war ja, ob man das Blockieren wegen CROSS-ORIGIN mit JSONP oder irgendwie anders umgehen kann.


    basti1012:

    Die Telekom bietet drei Homepagepakete an: S, M und L. Im Homepagepaket S ist PHP nicht enthalten. Habe dein Beispiel auch nochmal getestet. Es kommt nichts zurück. War aber, wie schon geschrieben, bisher auch kein großes Problem für mich.


    Ich habe inzwischen Weatherlink IP bestellt und warte nun ab bis ich meinen persönlichen Link anfordern kann. Vielleicht liegt das Blockieren ja wirklich an dieser komischen Demo-Datei.


    Vielen Dank für deine Unterstützung!

    Ich melde mich wieder wenn ich meinen Link erhalten habe.

  • Stef:

    Danke, aber dieser Fehler war von Anfang an bekannt.

    Die Frage war ja, ob man das Blockieren wegen CROSS-ORIGIN mit JSONP oder irgendwie anders umgehen kann.

    Aso okay. Dann habe ich wohl was überlesen.

    Noch als Info: Wenn der Betreiber diesen Header nicht so gesetzt hast das er es erlaubt, wirst du es wohl mit legalen Methoden nicht schaffen diese Blockierung irgendwie zu umgehen. Daher ist es eine gute Entscheidung dir dies zu kaufen und damit dies nochmal zu versuchen.

  • Habe das CROSS-ORIGIN-Problem an den Davis-Support weitergegeben und folgende Antwort erhalten:

    "Your Browser is blocking an AJAX call to a site other than the one being shown. You will need to make your API call from the server side, not the browser."Kann gerade nicht allzu viel damit anfangen.

    Wie könnte denn eine serverseitige Anfrage aussehen?

  • Da hat dir Basti in Posting #6 ein Beispiel gegeben. Aber Du schreibst ja leider, dass Du kein PHP auf deinem Webspace hast. Ich würde mir schnellstens einen anderen Provider suchen oder bei der Telekom upgraden.

    Aber dass Davis seine API nicht für Cross-Domain-Access freigibt ist auch ein schwaches Bild.

    Edit: Wohl besser nicht bei Telekom upgraden: Paket M kostet 15 €, bei all-inkl z. B. gibts PHP schon für 5 € ohne Mindest-Vertragslaufzeit und ohne Einrichtungsgebühr.

  • Das verstehe ich auch nicht so recht warum das nicht mit JS geht.

    Alle anderen Wetter Apis und auch viele anderen Apis werden ja dafür gemacht das man sie mit JS abrufen kann.

    Warum machen die das nicht ?

    Komischerweise bietet der Anbieter auch keine Codes an wie man das richtig abrufen kann ( zumindest habe ich noch nix gefunden ).

    Bei anderen Anbieter gibt es meistens Beispiel Codes wie man das abrufen kann ?

    Hast du jetzt deinen eigenen Api Schlüßel ?

    Das wird glaube ich auch keinen anderen unterschied machen.

    Willst du jetzt einen anderen Anbieter holen ?,

    Es gibt auch kostenlose mit Php ( bplaced.net ), doch da werden solche verbindungen erst mit bplaced pro möglich sein, also wird dir das auch nix bringen.


    Wenn du das alles nur testen willst bevor du dein Provider wechseln tust dann gibt es doch noch eine Lösung dafür.

  • Tja, dann werde ich mir wohl doch einen anderen Provider suchen müssen...


    Inzwischen habe ich meinen eigenen Api-Schlüssel. Geht aber wie erwartet auch nicht.


    Habe mir bei all-inkl einen Test-Account besorgt (wird nach einer Woche automatisch wieder gelöscht).

    Das kleine php-Testprogramm (php-info aus Posting #13) funktioniert.

    Das Beispiel aus Posting #6 scheint noch nicht ganz perfekt zu sein.

    Zumindest hätte ich (ohne php-Kenntnisse) die Auflistung aller Schlüssel und Werte erwartet.

    Tatsächliches Ergebnis:

    html-seminar.de/woltlab/attachment/2111/

Jetzt mitmachen!

Sie haben noch kein Benutzerkonto auf unserer Seite? Registrieren Sie sich kostenlos und nehmen Sie an unserer Community teil!