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
Réponse acceptée

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: * /!\

Salut,

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

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

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

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