Axios POST ne fonctionne pas

Question

Je sais qu'il y a beaucoup de questions sur le même problème, mais aucune des solutions n'a encore fonctionné pour moi.

J'ai une application ReactJS consommant une API intégrée à Lumen. L'API est également consommée par React Native et JQuery AJAX et fonctionne correctement à la fois.

Lorsque j'essaie d'envoyer une requête [~ # ~] [~ # ~] avec axios de ReactJS, j'obtiens une erreur 405 Méthode non autorisée sur les [~ # ~] options [~ # ~] Demande.

La demande axios est:

const body = { username, password };

axios.post(`{$uri}/payment/api/login`, {body})
     .then(res => console.log(res))
     .catch(err => console.log('Login: ', err));

Au début, je pensais que c'était un problème CORS, ce qui aurait été étrange car mon API est consommée par un site statique hébergé sur AWS S3 sans aucun problème. Mon middleware CORS fonctionne donc très bien.

J'ai ensuite essayé d'utiliser fetchAPI pour appeler l'API et cela fonctionne bien. J'ai essayé d'envoyer une [~ # ~] publication [~ # ~] à une API factice https://jsonplaceholder.typicode.com/users d'axios et cela a bien fonctionné.

Modifier

D'accord, je viens de découvrir que fetchAPI envoie des données au format application/x-www-form-urlencoded qui, d'une manière ou d'une autre, n'est pas soumis aux demandes de pré-vol. Cela devrait signifier qu'il y a un problème avec le middleware CORS.

CORSMiddleware

<?php

namespace App\Http\Middleware;

use Closure;

class CORSMiddleware
{
  /**
   * Handle an incoming request.
   *
   * @param  \Illuminate\Http\Request  $request
   * @param  \Closure  $next
   * @return mixed
   */

   public function handle($request, Closure $next)
   {
      $response = $next($request);
      $response->header('Access-Control-Allow-Methods', 'HEAD, GET, POST, PUT, PATCH, DELETE, OPTIONS');
      $response->header('Access-Control-Allow-Headers', $request->header('Access-Control-Request-Headers'));
      $response->header('Access-Control-Allow-Origin', '*');
   }
}

Le même middleware exact est également utilisé dans une autre génération d'API dans Lumen et consommé par Vue Front-End qui utilise axios .

Informations supplémentaires

[~ # ~] get [~ # ~] La demande fonctionne bien sur mon API.

Answer 1

Pour moi, le problème était du côté serveur (Node.js).

J'appliquais ma fonction middleware (qui vérifie si le jeton est présent ou non) avant d'appliquer les paramètres CORS, ce qui a conduit à des appels OPTIONS uniquement.

par exemple.

1. app.use (verifyToken);
2. require ("./ startup/cors") (app)

J'ai inversé leur commande et cela a bien fonctionné pour moi.