web-dev-qa-db-fra.com

Axios call api avec GET deviennent OPTIONS

J'utilise axios pour appeler l'API (en front-end). J'utilise la méthode "GET":

import axios from 'axios';
import querystring from 'querystring';

var url   = "mydomain.local",
    token = "blablabla...blabla";  

var configs = {
    headers: {
        'Authorization': 'Bearer ' + token,
        'Agency': 'demo0'
    }
};

var testapi = axios.create({
        baseURL: 'http://api.' + url
    });

testapi.get( '/relativeUrl', configs
).then(function (response) {
    console.log(response);
}).catch(function (error) {
    console.log(error);
});

J'ai une méthode 405 non autorisée. La méthode est "OPTIONS" mais j'utilise la méthode ".get ()". 405 Méthode non autorisée. Méthode OPTIONS

Je teste call api avec postman et je reçois 200 OK:

postman 200 OK capture d'écran

Quelqu'un a une idée?

javascriptsymfonycorsaxiospreflight
4
riwanab

Comme @Shilly dit, la méthode OPTIONS est pré-vol sur les navigateurs modernes lorsque Conditions de demandes en amont (MDN) :

Dans l'en-tête de réponse, j'avais Allow:"GET, HEAD, POST, PUT, DELETE". Donc, la méthode OPTIONS n'est pas disponible et doit être configurée sur le serveur (Apache).

Je fais le changement sur Apache ( /etc/Apache2/sites-available/000-default.conf ):

Header set Access-Control-Allow-Origin "*"
Header set Access-Control-Allow-Headers "*"
Header set Access-Control-Allow-Methods "PUT, GET, POST, DELETE, OPTIONS"

Dans les en-têtes de demande, j'ai:

 enter image description here

Origine: "null" est un problème. La cause est:

file: // Les URL produisent une origine nulle qui ne peut pas être autorisée via echo-back. Ne pas essayer d'exécuter une demande CORS à partir d'un fichier: // URL ( voir cet article pour plus de détails )

Après avoir placé mon fichier javascript sur un serveur Apache, l’origine n’était pas nulle, mais je dois ajouter NelmioCorsBundle à mon projet Symfony pour autoriser le contrôle en amont.

7
riwanab

Donc, la façon de résoudre ce npm install qs.

Ensuite:

import qs from 'qs'

function send(params) {
  return axios.post('/api/create/', qs.stringify(params))
}
1
Gal Bracha