Stratégie CORS : la réponse à la demande de contrôle en amont échoue au contrôle du contrôle d'accès : l'en-tête « Access-Control-Allow-Origin » est manquant dans la demande
J'ai donc essayé de jouer un peu avec le frontend et le backend. Lorsque j'essaie d'envoyer des données du frontend au serveur, j'obtiens
L'accès à XMLHttpRequest sur 'http://test.localhost/login' depuis l'origine 'http://localhost:3000' a été bloqué par la politique CORS : la réponse à la demande de contrôle en amont a échoué. Vérification du contrôle d'accès : aucun 'Access-Control' - L'en-tête Allow-Origin' est présent sur la ressource demandée
Voici mes paramètres axios onClick :
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;
});
};
Mon axiosClient est :
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;
Ma configuration cors sur le backend est
<?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;
}
}