Axios CORS/Preflight schlägt mit Laravel 5.4 fehl API-Aufruf

Question

Ich habe ein Problem mit Laravel 5.4 und meiner React-Anwendung, die Axios verwendet, um Anfragen zu bearbeiten.

Hier ist der Fehler, den ich bekomme.

Hier sind meine Anfrage Header für die Preflight-Antwort, die fehlschlägt.

Hier ist die fehlgeschlagene Anfrage nach dem Preflight:

Hier ist meine Axios Anfrage Konfiguration:

let req = axios({ 
    method: "GET", 
    url: https://api.vendorgraphs.com/{queryStringHere} 
    headers: { 
     'Accept': 'application/json', 
     'Content-Type': 'application/json', 
     'Authorization': 'Bearer ' + accessToken 
    } 
}); 

Eine interessante Sache ist zu beachten, dass es den Endpunkt mit der ist die Angabe HTTPS Protokoll. Ähnliche Anfragen in meiner Anwendung funktionieren so, wie sie sein sollten, aber dies ist die einzige, die fehlschlägt. Liegt es an der Verwendung einer Abfragezeichenfolge?

Die Anforderung trifft einen API-Endpunkt als GET-Anforderung. Ich benutze Laravel und das Laravel-Cors-Paket, um meine Wünsche zu erfüllen.

Hier ist meine Konfiguration für CORS:

Dies ist in meinem Kernel.php

protected $middleware = [ 
    \Barryvdh\Cors\HandleCors::class, 
    \Illuminate\Foundation\Http\Middleware\CheckForMaintenanceMode::class, 
    \Illuminate\Foundation\Http\Middleware\ValidatePostSize::class, 
    \App\Http\Middleware\TrimStrings::class, 
    \Illuminate\Foundation\Http\Middleware\ConvertEmptyStringsToNull::class, 
]; 

und meine cors.php in der Config-Ordner

return [ 
    'supportsCredentials' => false, 
    'allowedOrigins' => ['*'], 
    'allowedHeaders' => ['*'], 
    'allowedMethods' => ["GET", "OPTIONS", "POST", "PUT", "PATCH", "DELETE"], 
    'exposedHeaders' => [], 
    'maxAge' => 0, 
]; 

ich natürlich sehen, dass Das Preflight schlägt in der Netzwerkregisterkarte fehl. Was ich jedoch nicht verstehe, ist, warum ich anstelle eines 405 oder eines anderen HTTP-Statuscodes einen Fehler mit gemischten Inhalten erhalte. Es erscheint seltsam, dass ich sage, dass ich einen Endpunkt anrufe, der das HTTP-Protokoll verwendet, wenn ich die URL explizit mit HTTPS einstelle.

Ich bin seit einiger Zeit auf diesem stecken und könnte einige Einblicke in das Problem verwenden. Es scheint, als hätten viele Leute "ähnliche" Probleme mit OPTIONS Preflights gehabt. Ich habe Dinge wie das Erstellen einer Middleware getan, die nur 200 HTTP-Statuscode zurückgibt, wenn die Methode für die Anfrage OPTIONS ist. Aber das hat auch nicht funktioniert. Ändern der Anfrage zu Optionen für Axios und Ändern der Route auf Laravel zu etwas wie:

Route::options("/api/endpoint", controller@method); 

hat auch nicht funktioniert. Ich verstehe einfach nicht, warum es auf HTTP-Protokolle umleitet und Fehler mit gemischten Inhalten zurückgibt, wenn es so aussieht, als hätte es nichts mit CORS zu tun, aber die Preflight-Anforderung schlägt fehl, was darauf hindeutet, dass es ein CORS-Problem ist. Jede und jede Einsicht wird geschätzt.

<IfModule mod_rewrite.c> 
    <IfModule mod_negotiation.c> 
     Options -MultiViews 
    </IfModule> 

    RewriteEngine On 

    # Redirect Trailing Slashes If Not A Folder... 
    RewriteCond %{REQUEST_FILENAME} !-d 
    RewriteRule ^(.*)/$ /$1 [L,R=301] 

    # Handle Front Controller... 
    RewriteCond %{REQUEST_FILENAME} !-d 
    RewriteCond %{REQUEST_FILENAME} !-f 
    RewriteRule^index.php [L] 

    # Handle Authorization Header 
    RewriteCond %{HTTP:Authorization} . 
    RewriteRule .* - [E=HTTP_AUTHORIZATION:%{HTTP:Authorization}] 

    RewriteCond %{HTTPS} !=on 
    RewriteCond %{HTTP:X-Forwarded-Proto} ^http$ 
    RewriteRule .* https://%{HTTP_HOST}%{REQUEST_URI} [R=301,L] 
</IfModule> 

Answer 1

Die Ursache des Problems ist, die Sie sehen, dass Server selbst leitet den https URL zu http:

$ curl -I 'https://api.vendorgraphs.com/api/dealershipvendorleads/?id=3,4&startDate=2017-4&endDate=2017-8' 

HTTP/1.1 301 Moved Permanently 
Content-Type: text/html; charset=iso-8859-1 
Date: Wed, 20 Sep 2017 15:33:50 GMT 
Location: http://api.vendorgraphs.com/api/dealershipvendorleads?id=3,4&startDate=2017-4&endDate=2017-8 
Server: Apache 
Connection: keep-alive 

Hinweis den 301 Statuscode und die Location Header mit http://api.vendorgraphs.com/…

Das bedeutet also, dass Sie von einem sicheren Kontext (https Seite) aus keine Cross-Origin-Anfrage an diesen API-Endpunkt senden können, ohne dass die Browser ihn als mi blockieren xed Inhalt (wie Sie sehen).

Das ist also nicht wirklich ein CORS-Problem - stattdessen ist es ein reines Mixed-Content-Problem.