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; } }
Avez-vous essayé d'inclure l'adresse IP localhost dans cors.php comme ceci ?
Si cela ne fonctionne pas, essayez d'utiliser cette configuration
Et commentez cette ligne dans Kernel.php, mais veuillez noter que cette configuration acceptera les requêtes de n'importe où, alors assurez-vous que votre backend reçoit les requêtes de vos sources autorisées préférées avant le déploiement.