Forum : Laravel + axios

Bonjour,

Je rencontre une problématique avec laravel 5.3 et axio (https://github.com/mzabriskie/axios)

Je peux sans problème faire des requetes en get, mais dès que je souhaites faire une requete Post je me fais boulé :)

Voici ma configuration axios :

import axios from "axios" var config ={ baseURL:'http://localhost:8000/', } getToken().then((token) =>{ config.headers = {'X-CSRF-TOKEN': token,'X-Requested-With': 'XMLHttpRequest'} }) function getToken(){ return axios.get('token',config) .then((response) =>{ return response.data.token }).catch(function (error) { console.log(error); return null }); }

coté laravel voici mes routes :

Route::group(['middleware' => ['cors',"web"]], function (){ Route::resource('todo','TodoController'); Route::get('token',function(){ return Response::json(['token'=>csrf_token()]); }); });

Le middleware Cors :

class Cors { /** * Handle an incoming request. * * @param \Illuminate\Http\Request $request * @param \Closure $next * @return mixed */ public function handle($request, Closure $next) { header("Access-Control-Allow-Origin: *"); // ALLOW OPTIONS METHOD $headers = [ 'Access-Control-Allow-Methods'=> 'POST, GET, OPTIONS, PUT, DELETE', 'Access-Control-Allow-Headers'=> 'Content-Type, X-Auth-Token, Origin,X-CSRF-TOKEN' ]; if($request->getMethod() == "OPTIONS") { // The client-side application can set only headers allowed in Access-Control-Allow-Headers return Response::make('OK', 200, $headers); } $response = $next($request); foreach($headers as $key => $value) $response->header($key, $value); return $response; } }

et la fameuse requète post qui ne passe pas :(

axios.post('todo',{libelle:libelle},config) .then((response) =>{ console.log(response) }).catch(function (error) { console.log(error); return null });

J'espère avoir été assez claire et je vous remerci par avance de vos explications

Cdt,

François

5 réponses

betaWeb,

il y a 9 ans

Salut,

Quelle erreur rencontres-tu ? C'est côté API ou front ?

Francois Bouyer,

il y a 9 ans

Bonsoir BetaWeb,

je rencontre l'erreur coté front,

voici le message dans ma console :

XMLHttpRequest cannot load http://localhost:8000/todo. Response to preflight request doesn't pass access control check: No 'Access-Control-Allow-Origin' header is present on the requested resource. Origin 'http://localhost:9999' is therefore not allowed access. todoAction.js:33 Error: Network Error at createError (http://localhost:9999/main.min.js:34898:16) at XMLHttpRequest.handleError (http://localhost:9999/main.min.js:34755:15)

J'ai fais le test avec Postman, en emmetant une requete en post sur la même url en indiquant bien le même header

X-CSRF-TOKEN : <Mon Token>

et le serveur répond bien.

Information qui a peut être son importance, le serveur laravel est sur le port 8000 et mon application en react tourne sur le port 9999

Cdt,

François

betaWeb,

il y a 9 ans

Donc c'est un souci au niveau du header 'Access-Control-Allow-Origin' : ton front n'est pas autorisé à taper sur ton API.

Tu peux commencer par regarder cette solution : http://stackoverflow.com/questions/28096827/allow-no-access-control-allow-origin-header-in-laravel#28096936

/!\ Par contre pour la prod, ne JAMAIS mettre un Access-Control-Allow-Origin: * /!\

Francois Bouyer,

il y a 9 ans

J'ai résolu mon problème, en effet j'avais bien un problème de Cors,
Je penses que le middleware que j'avais créer n'était pas éfficiant, je suis donc passé par
https://github.com/barryvdh/laravel-cors
et tout fonctionne correctement maintenant

betaWeb,

il y a 9 ans

Super :)
Pense à passer le statut de ton sujet à 'résolu' ;)