Warum ist das CORS Anfrage, andernfalls nur im Firefox?

Ich bin Implementierung von CORS mit Anmeldeinformationen und einem preflight-Anfrage und ich bin ein wenig verwirrt, warum der preflight-Anfrage wiederholt nicht in Firefox 30 funktioniert aber in Safari (7.0.2) und Chrome 35. Ich denke, dass dieses Thema unterscheidet sich von "Warum funktioniert der preflight-OPTIONS-Anforderung von einem authentifizierten CORS-request funktionieren in Chrome aber nicht in Firefox?", weil ich bin nicht immer ein 401, sondern ein CORS-spezielle Nachricht von dem browser-client:

"Cross-Origin-Anfrage Blockiert: Die same-Origin-Policy verbietet das Lesen der remote-Ressource auf http://myurl.dev.com. Dies kann behoben werden, durch das verschieben der Ressource auf die gleiche domain oder die Aktivierung von CORS."

Zeigt ohne source-code, hier ist, was ich Tue:

Auf dem server:

Header für OPTIONEN Antwort:

  • Access-Control-Allow-Origin: [[kopieren Herkunft aus der Anfrage hier]]
  • Access-Control-Allow-Methods: "POST BEKOMMEN OPTIONEN"
  • Access-Control-Allow-Header: "X-Requested-With"
  • Access-Control-Allow-Credentials: "true"

Header für POST-Antwort:

  • Access-Control-Allow-Origin: [[kopieren Herkunft aus der Anfrage hier]]
  • Access-Control-Allow-Credentials: "true"

In den browser-client:

jQuery.ajax({
  url: requestUrl,
  type: 'POST',
  data: getData(),
  xhrFields: {
    withCredentials: true
  }
});

Pro spec, dies löst einen OPTIONEN preflight-request, muss der CORS-Header in seiner Antwort. Ich habe gelesen, durch die W3C-spec mehrere Male und ich kann nicht erkennen, was ich falsch mache, wenn überhaupt, in das preflight-Reaktion.

  • Bitte zeigen Sie die tatsächliche Anfragen/Antworten und/oder eine demo-Seite. Gerade jetzt, es gibt nicht genug details, und es scheint unmöglich zu sagen, wo die Dinge schief gehen.
  • Können Sie bestätigen, dass die OPTIONEN return-code 200?
  • Ich habe dieses Problem behoben. Es scheint, dass Firefox erwartet, dass die Liste in Access-Control-Allow-Methoden werden durch Komma getrennt. Ich geändert es zu "POST, GET, OPTIONS" und es magisch zu arbeiten begonnen. Ich dachte mir, diese sorgfältig zu Lesen developer.mozilla.org/en-US/docs/Web/HTTP/Access_control_CORS
InformationsquelleAutor rq_ | 2014-07-01
  1. 10

    Beachten Sie, dass Firefox der einzige browser, der kompatibel ist, hier. Wenn Analyse der Access-Control-Allow-Methods fehlschlägt pro https://fetch.spec.whatwg.org/#cors-preflight-fetch ein Netzwerk Fehler zurückgegeben werden muss. Und pro die ABNF für die header-Wert, es ist auf jeden Fall ein Komma-getrennter Wert.

    InformationsquelleAutor Anne
  2. 0

    Habe ich bemerkt, dass, wenn Sie einen send-CORS(Cross-Origin Resource Sharing) - request mit cookies, Firefox sendet nicht die erforderliche Antwort-Header.

    Lösung:

    Unterhalb Lösung fügt Header nur für die OPTIONEN Anfragen und akzeptiert Anfragen nur von example.com. Sie können ändern Sie die Implementierung für andere request-Methoden und die erwarteten Heerscharen.

    JS-CODE

    var xmlhttp = new XMLHttpRequest();
xmlhttp.withCredentials = true;

xmlhttp.onreadystatechange = function () {
    if (xmlhttp.readyState == XMLHttpRequest.DONE) {
        if (xmlhttp.status == 200) {
            success_callback(xmlhttp.responseText);
        } else {
            error_callback(xmlhttp.statusText);
        }
    }
};
xmlhttp.open("DELETE", url);
xmlhttp.send(null);

    Wenn Sie senden Sie eine Anfrage LÖSCHEN, die browser senden einen pre-flight-Anfrage für OPTIONEN, die erwartet Access-Control-Allow-Methods in die Antwort-Header. Basierend auf diesen header-Wert die tatsächliche DELETE-Anforderung gesendet wird. In Firefox, wenn Sie senden Sie eine Anfrage LÖSCHEN der pre-flight-request-response-Header nicht erwartet haben-Header, daher kann es nicht senden der eigentlichen Anfrage LÖSCHEN.

    Dieses problem zu überwinden, verwenden Sie die unten NGINX-server-Konfiguration.

    NGINX-CODE

    #handle CORS requests by adding required headers
if ($http_origin ~* .example.com) {
    set $cors "CORS-${request_method}";
}

if ($cors = "CORS-OPTIONS") {
    add_header 'Access-Control-Allow-Credentials' 'true';
    add_header 'Access-Control-Allow-Headers' 'Content-Type';
    add_header 'Access-Control-Allow-Methods' 'GET, POST, OPTIONS, DELETE';
    add_header 'Access-Control-Allow-Origin' $http_origin;
}

    Guten read auf CORS: https://www.html5rocks.com/en/tutorials/cors/

    InformationsquelleAutor Akshay Goyal
Schreibe einen Kommentar