CORS-Richtlinie: Antwort auf Preflight-Anfrage schlägt bei der Zugriffskontrollprüfung fehl: Der Header „Access-Control-Allow-Origin“ fehlt in der Anfrage
Also habe ich versucht, ein wenig mit dem Frontend und Backend herumzuspielen. Beim Versuch, Daten vom Frontend an den Server zu senden, erhalte ich
Der Zugriff auf XMLHttpRequest unter „http://test.localhost/login“ vom Ursprung „http://localhost:3000“ wurde durch die CORS-Richtlinie blockiert: Antwort auf Preflight-Anfrage fehlgeschlagen. Zugriffskontrollprüfung: Keine „Zugriffskontrolle“ – Der Header „Allow-Origin“ ist auf der angeforderten Ressource vorhanden
Hier sind meine Axios onClick-Einstellungen:
export const login = (email, password) => {
return axiosClient.post('/login', { email, password })
.then(response => {
// handle successful login
return response.data;
})
.catch(error => {
// handle failed login
throw error;
});
};
Mein axiosClient ist:
import axios from "axios";
const axiosClient = axios.create({
baseURL: process.env.REACT_APP_API_URL, (my localhost)
headers: {
'Content-Type': 'application/json',
Accept: 'application/json',
},
});
export default axiosClient;
Meine CORS-Konfiguration im Backend ist
<?php
namespace App\Http\Middleware;
use Closure;
use Illuminate\Http\Request;
class Cors
{
/**
* Handle an incoming request.
*
* @param \Illuminate\Http\Request $request
* @param \Closure(\Illuminate\Http\Request): (\Illuminate\Http\Response|\Illuminate\Http\RedirectResponse) $next
* @return \Illuminate\Http\Response|\Illuminate\Http\RedirectResponse
*/
public function handle($request, Closure $next)
{
$headers = [
'Access-Control-Allow-Origin' => 'http://localhost:3000',
'Access-Control-Allow-Methods' => 'GET, POST, PUT, DELETE, OPTIONS',
'Access-Control-Allow-Headers' => 'Content-Type, Authorization',
];
if ($request->isMethod('OPTIONS')) {
return response()->json([], 200, $headers);
}
$response = $next($request);
foreach ($headers as $key => $value) {
$response->header($key, $value);
}
return $response;
}
}