JavaScript Warum funktioniert $.getJSON nicht?

Spontan: Webseite unterstützt kein https.

Edit:

Ok, um es noch ein wenig auszuführen.
1. https verarbeitet deine Seite nicht. Beim Aufruf bekommst du ein connection_refused zurück. Also muss dein Aufruf über http gehen.
2. Die Api sendet kein Access-Control-Allow-Origin im Header, also sind Aufrufe von außerhalb der eigentlichen Domain geblockt. Du kannst versuchen, das zu umgehen. In der Doku von jQuery steht bei der getJSON-Methode, dass man versuchen soll, das ganze über JSONP zu lösen.

JSONP

If the URL includes the string "callback=?" (or similar, as defined by the server-side API), the request is treated as JSONP instead.

Wichtig ist aber: Das hängt vom Server bzw. der Api ab, ob das funktioniert oder nicht. In deinem Beispiel geht es.
 
Zuletzt bearbeitet von einem Moderator:
Generell gibt es drei Lösungen:

1. CORS - Der Server, an den deine ajax http Anfrage geschickt wird (in dem fall offene ....de) sendet in der Antwort folgenden HTTP-Header mit:

Code:
Access-Control-Allow-Origin: DEINEDOMAIN.DE

Macht er aber in diesem Fall nicht, das heißt diese Option fällt raus.

2. JSONP - Zu kompliziert um es in einfachen Worten zu erklären, einfach dem Link folgen. Unterstützt der Server aber soweit ich das gesehen habe auch nicht (@Nase hab im Browser die URL aufgerufen und ein ?callback=? angehängt und bekomme weiterhin reines JSON, also dürfte der Server das nicht unterstützen oder?).

3. Einen Proxy benutzen - Ist aufwendiger, aber soweit ich das sehe die einzige Möglichkeit in deinem Fall. Hier ist das ganze erklärt.

mfg Jojo
 
Nein, es kommt kein JSONP zurück, aber es werden Daten geliefert, was vorher nicht der Fall war. Heißt also, dass die Same-Origin-Policy umgangen wurde. Daraus kann man dann schon was machen.

Die beste Lösung ist hier aber ein Web Proxy - oder eine andere Api.
 
Oder versuche den Seitenbetreiber / API Anbieter zu erreichen und sag ihm, die API sollte immer "Access-Control-Allow-Origin: *" als HTTP Header in der Antwort haben. Das CORS System ist vor allem für den Schutz von Intranet-Anwendungen gedacht und die API steht eh öffentlich im Internet zur Verfügung und kann von jedem genutzt werden (außer eben Browsern direkt).
JSONP ist ein Hack und erhöht das Sicherheitsrisiko eigentlich unnötig (da die Daten als Code "ausgeführt" werden).
 
Nase schrieb:
Nein, es kommt kein JSONP zurück, aber es werden Daten geliefert, was vorher nicht der Fall war. Heißt also, dass die Same-Origin-Policy umgangen wurde. Daraus kann man dann schon was machen.

Nein, daraus kann man nichts machen. Der Server muss valides Javascript zurückgeben, weil der Browser die Rückgabe in einem script-Tag ausführen will:
Code:
<script>SERVERRESPONSE</script>
In dem Fall liefert er aber nur JSON zurück und JSON allein ist kein valides Javascript. Deswegen wird da jeder Browser einen Syntax Fehler o.ä. melden und die Ausführung anhalten.

mfg Jojo
 
Ich bin echt kein Pro auf dem Gebiet, aber so habe ich das gemacht:

Code:
<!DOCTYPE html>
<html>
<head>
    <script src="//code.jquery.com/jquery-1.11.3.min.js"></script>
    <script src="//code.jquery.com/jquery-migrate-1.2.1.min.js"></script>
    <script id="siteRead" type="text/javascript" src="http://offenedaten-koeln.de/api/3/action/site_read">

    </script>
    <script type="text/javascript">
        

        function get_CologneData() {
            var cologneSiteRead = "http://offenedaten-koeln.de/api/3/action/site_read";

            var x = JSON.parse($('#siteRead').html());
            alert(x.result);
        }


    </script>
    <title></title>
	<meta charset="utf-8" />
</head>
<body>
    <input type="button" onclick="get_CologneData();" value="anfordern" />
</body>
</html>

Und das kommt dabei raus:

error.PNG

@Jojo_44 meinst du das mit "kein valides JavaScript" und Syntax-Fehler?
 
Option 3 von Jojo_44 per Nginx Webserver:

Code:
server {
  listen [::]:80;
  listen 80;

  # The host name to respond to
  server_name koeln.beispiel.de;

  # Logs
  access_log /var/log/nginx/offenedaten-koeln.access.log;
  error_log /var/log/nginx/offenedaten-koeln.error.log;

  location / {
    proxy_pass      http://offenedaten-koeln.de;
    proxy_redirect  off;

    #Proxy Settings
    proxy_redirect     off;
    proxy_set_header   Host             $host:$server_port;
    proxy_set_header   X-Real-IP        $remote_addr;
    proxy_set_header   X-Forwarded-For  $proxy_add_x_forwarded_for;
    proxy_set_header   X-Forwarded-Proto $scheme;

    proxy_max_temp_file_size 0;
    proxy_connect_timeout      90;
    proxy_send_timeout         90;
    proxy_read_timeout         90;
    proxy_buffer_size          128k;
    proxy_buffers              32 32k;
    proxy_busy_buffers_size    256k;
    proxy_temp_file_write_size 256k;

    # CORS on Nginx
    # http://enable-cors.org/server_nginx.html
    if ($request_method = 'OPTIONS') {
        add_header 'Access-Control-Allow-Origin' '*';
        #
        # Om nom nom cookies
        #
        add_header 'Access-Control-Allow-Credentials' 'true';
        add_header 'Access-Control-Allow-Methods' 'GET, POST, OPTIONS';
        #
        # Custom headers and headers various browsers *should* be OK with but aren't
        #
        add_header 'Access-Control-Allow-Headers' 'DNT,X-CustomHeader,Keep-Alive,User-Agent,X-Requested-With,If-Modified-Since,Cache-Control,Content-Type';
        #
        # Tell client that this pre-flight info is valid for 20 days
        #
        add_header 'Access-Control-Max-Age' 1728000;
        add_header 'Content-Type' 'text/plain charset=UTF-8';
        add_header 'Content-Length' 0;
        return 204;
     }
     if ($request_method = 'POST') {
        add_header 'Access-Control-Allow-Origin' '*';
        add_header 'Access-Control-Allow-Credentials' 'true';
        add_header 'Access-Control-Allow-Methods' 'GET, POST, OPTIONS';
        add_header 'Access-Control-Allow-Headers' 'DNT,X-CustomHeader,Keep-Alive,User-Agent,X-Requested-With,If-Modified-Since,Cache-Control,Content-Type';
     }
     if ($request_method = 'GET') {
        add_header 'Access-Control-Allow-Origin' '*';
        add_header 'Access-Control-Allow-Credentials' 'true';
        add_header 'Access-Control-Allow-Methods' 'GET, POST, OPTIONS';
        add_header 'Access-Control-Allow-Headers' 'DNT,X-CustomHeader,Keep-Alive,User-Agent,X-Requested-With,If-Modified-Since,Cache-Control,Content-Type';
     }
  }

  # Specify a charset
  charset utf-8;
}

Oder Apache (benoetigt mod_headers, mod_proxy und mod_proxy_http)

Code:
<VirtualHost *:80>
	    ServerName koeln.beispiel.de

    ProxyRequests Off
    <Proxy *>
        Order deny,allow
        Allow from all
    </Proxy>

    ProxyPass / http://offenedaten-koeln.de/
    ProxyPassReverse / http://offenedaten-koeln.de/
    <Location />
        Header set Access-Control-Allow-Origin "*"
        Order allow,deny
        Allow from all
    </Location>
</VirtualHost>

Genau, du versuchst JSON als JavaScript auszufuehren. Das geht nicht, deswegen die Fehlermeldung.
 
Zuletzt bearbeitet: (Apache Konfiguration hinzugefuegt)
IKäsebrot schrieb:
@Jojo_44 meinst du das mit "kein valides JavaScript" und Syntax-Fehler?

Jop, das ist genau das Problem was ich oberhalb beschrieben habe. Wie gesagt, es bleibt nur Lösung 3 übrig, die @r15ch13 sehr schön erklärt hat.

mfg Jojo
 
Wow hätte nicht gedacht, dass eine einfache JSON-Abfrage so einen Rattenschwanz nach sich zieht. Werde es bei der nächsten Gelegenheit ausprobieren.

Bei dem Anblick überlege ich mir das eventuell Serverseitig zu implementieren. :D
 
Naja der Rattenschwanz haengt nnur dran, weil die Stadt Koeln ihre API nicht richtig entwickelt hat. :)
Die Proxy Loesung ist meiner Meinung nach die einfachste. Man kann auch noch HTTPS damit ermoeglichen (auch wenn dann hinten rum HTTP laeuft).
 
Zurück
Oben