Das Problem
Die Methode POST wird von Access-Control-Allow-Methods in der Preflight-Antwort nicht zugelassen.
Dieses Problem könnte Ihnen bei der Entwicklung einer Anwendung, die bei jedem Schritt aus API-Aufrufen besteht, schon einmal begegnet sein. Hier geht es um den VueJS-Client und die Laravel-API, um genau zu sein. Lassen Sie uns einige der möglichen Lösungen diskutieren, um dieses Verhalten anzugehen und es ein für alle Mal zu beheben.
Die Lösung? Lösungen*
Lösung # 01
Dies ist die einfachste, schmutzigste und dennoch schnellste Lösung für dieses Problem, fügen Sie einfach die folgenden Zeilen in Ihre web/routes.php Datei zu ermöglichen CORS für Ihre Anwendung.
header('Access-Control-Allow-Origin: *');
header('Access-Control-Allow-Methods: POST, GET, OPTIONS, PUT, DELETE');
header('Access-Control-Allow-Headers: Content-Type, X-Auth-Token, Origin, Authorization');Lösung # 02
Diese zweite Lösung kann für meinen Geschmack auch als schmutzig bezeichnet werden. Aber für schnelle Ergebnisse funktioniert sie gut. Fügen Sie den folgenden Code in den Anfang Ihrer public/index.php Datei und ersetzen Sie Ihre API- und Client-URIs, um CORS für Ihre Anwendung zu ermöglichen.
$allowedOrigins = array(
'(http(s)://)?(www\.)?your_api_domain\.com', // Laravel API Domain
'http://my_vue_client.dev' // VueJS CLient
);
if (isset($_SERVER['HTTP_ORIGIN']) && $_SERVER['HTTP_ORIGIN'] != '') {
foreach ($allowedOrigins as $allowedOrigin) {
if (preg_match('#' . $allowedOrigin . '#', $_SERVER['HTTP_ORIGIN'])) {
header('Access-Control-Allow-Origin: ' . $_SERVER['HTTP_ORIGIN']);
header('Access-Control-Allow-Methods: GET, PUT, POST, DELETE, OPTIONS');
header('Access-Control-Max-Age: 1000');
header('Access-Control-Allow-Headers: Content-Type, Authorization, X-Requested-With');
break;
}
}
}Lösung # 03
Erstellen Sie eine CORS-Middleware und stellen Sie dort alles ein, z. B.
php artisan make:middleware CorsMiddleware
Jetzt im Inneren des handle Methode der CorsMiddleware
header("Access-Control-Allow-Origin: *");
$headers = [
'Access-Control-Allow-Methods'=> 'POST, GET, OPTIONS, PUT, DELETE',
'Access-Control-Allow-Headers'=> 'Content-Type, X-Auth-Token, Origin'
];
if($request->getMethod() == "OPTIONS") {
return response()->make('OK', 200, $headers);
}
$response = $next($request);
foreach($headers as $key => $value)
$response->header($key, $value);
return $response;Registrieren Sie die Middleware in app\Http\Kernel.php
protected $routeMiddleware = [ 'cors' => \App\Http\Middleware\CorsMiddleware::class, ];
Und verwenden Sie sie für Ihre Routen,
Route::middleware('cors')->group(function(){
//your_routes
});Lösung # 04
Sie können eines der Pakete verwenden, die speziell für die Handhabung von CORS verfügbar sind. Das folgende ist eines meiner Lieblingspakete für CORS, Sie können es auch ausprobieren.
- https://github.com/barryvdh/laravel-cors
Schlussfolgerung
Sie können jede der oben genannten Methoden verwenden, um das CORS-Problem in Ihrer Laravel-basierten Anwendung zu lösen. Wenn Sie einen anderen Ausweg als diese Ansätze haben, lassen Sie es uns im Kommentarbereich unten wissen.
Beachten Sie, dass alle oben genannten Lösungen erprobt und getestet sind und hervorragend funktionieren. Wenn Sie irgendwelche Fragen zu diesem Artikel haben, hinterlassen Sie uns einen Kommentar unten. Sie können uns auch folgen auf Twitter.
