jQuery AJAX call das Ergebnis im Fehler-status 403

Ich versuche eine Abfrage zu einem web-service mithilfe von jQuery-AJAX. Meine Abfrage sieht wie folgt aus:

var serviceEndpoint = 'http://example.com/object/details?version=1.1';
$.ajax({
  type: 'GET', 
  url: serviceEndpoint,
  dataType: 'jsonp',
  contentType: 'jsonp',
  headers: { 'api-key':'myKey' },
  success: onSuccess,
  error: onFailure
});

Wenn ich diese ausführen, bekomme ich einen status-Fehler 403. Ich verstehe nicht, warum mein Anruf dazu führt, dass der status-code 403. Ich bin in der Kontrolle der Sicherheit auf meinen Dienst, und es wird markiert, wie weit offen. Ich weiß der key gültig ist, denn ich bin mit es in ein anderes Gespräch führen, das funktioniert. Hier ist der Aufruf, Werke:

var endpoint = 'http://example.com/object/data/item?version=1.1';
$.ajax({ 
  type: 'POST', 
  url: endpoint, 
  cache: 'false',
  contentType:'application/json',
  headers: {
    'api-key':'myKey',
    'Content-Type':'application/json'
  },
  data: JSON.stringify({
    id: 5,
    count:true
  }),
  success: onDataSuccess,
  error: onDataFailure
});

Ich weiß, das sind zwei verschiedene Endpunkte. Aber ich bin 100% davon überzeugt, dass dies ist nicht ein server-Authentifizierung oder Berechtigung Fehler. Wieder einmal, alles ist weit offen auf der server-Seite. Was bedeutet, dass ich einige Fehler auf meinem client-Seite-Anfrage.

Ich das Gefühl, ich sollte kommunizieren, dass dieser Antrag gestellt wird während der Entwicklung. Also, ich bin mit dieser aus http://localhost:3000. Aus diesem Grund habe ich sofort angenommen, es war ein CORS-Problem. Aber sieht alles richtig. Die Tatsache, dass meine POST-Anfrage funktioniert, aber meine BEKOMMEN Sie nicht, hat mich absolut frustriert. Bin ich etwas fehlt? Was könnte es sein?

  • Hast du auch versuchen, öffnen der url in Ihrem browser direkt? Vermissen Sie das /data/ Teil der url übereinstimmen, die funktioniert?
  • Beachten Sie, dass Sie können nicht senden Header für jsonp Anfrage, es ist eine script-Anfrage. Sind Sie sicher, dass Sie wollen jsonp und nicht json? Auch der Grund, warum JSON.stringify() für Header? BEKOMMEN hat keine Anfrage contentType. da gibt es keinen Körper, der Inhalt gesendet wird. Sie haben zahlreiche Probleme, von denen jeder kann sein problem
  • Ich habe versucht, öffnen im browser. Ich bin nicht vertraut jeder /data/ Teile, die ich brauche zu gehören. Ich buchstäblich nur übergeben zu müssen, in der version und api-key. Ich nahm an, ich sollte den api-key als header. Muss ich die data und contentType Eigenschaften jsonp? Dies scheint, wie sollte es ein einfacher call. Aber klar, ich bin botching und etwas Blick. Was sollte der richtige Aufruf Aussehen?
  • jsonp ist eine andere Art von Anfrage als ajax und erlaubt keine Header. Es gibt einfach nicht genug bekannt über ein problem aus, was gezeigt wird
  • benutzt du chrome? und was ist mit Ihren back-end-Technologie?
  • Ich bin mit Chrome. All dies ist in einem index.html Datei. Ich bin mit der Seite durch lite-server (github.com/johnpapa/lite-server)
  • Nur ein Gedanke, sind Sie mit jedem ad-Blocker? Das hat verursacht Probleme mit mir in die Vergangenheit.
  • Es gibt keine ad Blocker installiert.
  • Haben Sie versucht, die content-type wie application/javascript? datatype jsonp aber scheint nicht, wie content-type sein sollte.
  • Haben Sie bestätigt, dass Sie die Einrichtung gültigen Header? ref

InformationsquelleAutor Zach Templeton | 2016-04-16
  1. 18

    Grund der 403-Fehler Sie sind keine Header senden. Da Sie eine CORS Anfrage, Sie können nicht senden, benutzerdefinierte Header, es sei denn, server ermöglicht, dass diese header durch hinzufügen Access-Control-Allow-Headers auf die Antwort.

    In einem Preflight-request, client 2 requests an den server. Erste ist preflight (mit OPTIONEN Methode) und die zweite ist das eigentliche Anliegen. Der server sendet Access-Control-Allow-Header - header als Antwort des preflight-Anfrage. Also es ermöglicht gewisse Header gesendet werden. Durch die auf diese Weise Ihre POST-request funktionieren kann, weil die POST-Anforderung ist ein preflight-Anfrage. Aber für einen GET-request, es ist kein preflight zu sammeln Access-Control-Allow-Header - header und browser-nicht senden Sie Ihre benutzerdefinierte Header in diesem Fall.

    Einen workaround für dieses Problem:

    Als workaround setzen Sie Ihre dataType und contentType zu json wie die folgenden:

    var serviceEndpoint = 'http://example.com/object/details?version=1.1';
$.ajax({
  type: 'GET', 
  url: serviceEndpoint,
  dataType: 'json',
  contentType: 'json',
  headers: { 'api-key':'myKey' },
  success: onSuccess,
  error: onFailure
});

    Durch diese Weise, Ihre get-Anforderung wird eine preflighted request. Wenn Ihr server ermöglicht das api-key mit Access-Control-Allow-Header header, es wird funktionieren.

    Beispiel-server-Konfiguration für die obige Anfrage (geschrieben in express.js):

    res.setHeader('Access-Control-Allow-Origin', '*');
res.setHeader('Access-Control-Allow-Methods', '*');
res.setHeader('Access-Control-Allow-Headers', 'api-key,content-type');
res.setHeader('Access-Control-Allow-Credentials', true);

    HINZUGEFÜGT:

    Eigentlich contentType sollte entweder application/javascript oder application/json dabei eine jsonp-Anfrage. Es gibt keine contentType als jsonp.

    • wo soll das res.setHeader code geschrieben werden? Auch, welche Art von Objekt ist res?
    • es wird in der server-Seite. hier ist die docs für res im express server.
    InformationsquelleAutor ykaragol
  2. 0

    Wenn man sich die API-Seite für die jQuery-Ajax-call, es wird von den folgenden in den Content-Type-Abschnitt:

    Hinweis: Für cross-domain-requests, die Einstellung der content-type nichts
    andere als application/x-www-form-urlencoded, multipart/form-data, oder
    text/plain wird, löst der browser das senden einer preflight-OPTIONEN
    request an den server.

    Dass die Seite nicht wirklich erwähnen, was ein "preflight-OPTIONS-Anforderung" ist, aber ich habe einige interessante links gefunden, wenn man diesen Satz bis online:

    Was sehr interessant ist die code-Beispiel & die CORS Bild auf die Seite HTML5Rocks. Das Bild zeigt, wie die Ajax-calls gemacht werden, aus dem JavaScript-code an den browser auf den server & wie sich die Reaktionen sind "round-tripping" zwischen allen 3 von denen.

    Neigen wir dazu, zu denken, der JavaScript + Browser = Client, aber in der Darstellung der Autor erklärt den Unterschied zwischen der web-Entwickler code & die browser-Entwickler code, wo die ehemaligen ist geschrieben in JavaScript-code, aber der letztere wurde geschrieben mit C, C++ oder C# - code.

    Einen guten packet analyzer ist Fiddler, das wäre ähnlich Wireshark. Entweder eins der beiden tools, sollte zeigen Sie den pre-flight-Anfragen, die gesendet werden, vom browser an den server. Die meisten wahrscheinlich, dass Ihre Ajax-request blockiert wird, durch die server mit einer 403 Forbidden-Fehler.

    InformationsquelleAutor Clomp
Schreibe einen Kommentar