Laravel Api sagt: Access-Control-Allow-Origin Problem

Gefühlt bei jedem neuen Webprojekt bzw. Apiprojekt bekommt man diesen Fehler und man reißt die Armen hoch zur Decke und ruft: “Warum immer ich? Wieso vergesse ich das immer wieder und was muss ich jetzt machen”. Wahrscheinlich ist es Euch eben so gerade passiert?

Als Autor dieses Textes sag ich: “Nicht schlimm. Passiert vielen und es ist ganz einfach”. Folge dieser Anleitung:

Schritt 1
Erstelle eine neue Middleware mit:

php artisan make:middleware Cors

Schritt 2
Gehe zur neuen Middleware und ändere den Rückgabewert der handle Methode wie folgt ab:

public function handle($request, Closure $next)
{
return $next($request)
	->header('Access-Control-Allow-Origin', "*")
	->header('Access-Controll-Allow-Methods', "GET, POST")
	->header('Access-Controll-Allow-Headers', "Accept,Authorization,Content-Type");
}

Schritt 3
Füge in der protected membervariablen $middleware in der Kernel.php die neuen Cors Middleware ein:

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

und das wars.

Erklärung

Die neu erstellte Middleware wird nun durch das Einhängen im Kernel bei jedem Request mit aufgerufen. Das bewirkt, dass der Response header mit den Header Attributen : Access-Control-Origin, -Methods und -Headers modifiziert mitgeschickt werden. Somit weiß der Clientbrowser: “keine Panik, alles im grünen Bereich. Der und wir dürfen das”.