La bouteille ne reconnaît pas Axios.js json post

Question

J'essaie de faire une demande de poste avec Axios à un backend codé en bouteille Python.

Le problème est que je reçois un 500 internal lorsque la demande est renvoyée.

Tout d'abord, voici le code de demande Axios:

const data = {date: formatDate(date), titles} 
post(`${API_URL}/save_day_titles`, data) 
    .then(res => { 
    console.log('response success', {...res}); 
    }) 
    .catch(res => { 
    console.log('response', {...res}); 
    }); 

Et le code de la bouteille:

@planApi.route('/api/v3.6/save_day_titles', method=['POST', 'OPTIONS']) 
def plan_save(): 
    date = request.json['date'] 
    titles = request.json['titles'] 
    plan = { 
     'date': datetime.datetime.strptime(date, '%Y-%m-%d'), 
     'titles': titles 
    } 
    id = titlesMongo.insert_one(plan).inserted_id 
    return {"id": str(id), "plan_date": date, "planification": titles} 

L'erreur connecté à la console Web est clair et simple:

OPTIONS xxx/api/v3.6/save_day_titles 500 (Erreur interne du serveur)

XMLHttpRequest ne peut pas charger xxx/api/v3.6/save_day_titles. La réponse à la demande de contrôle en amont ne passe pas la vérification du contrôle d'accès: aucun en-tête «Access-Control-Allow-Origin» n'est présent sur la ressource demandée. L'origine 'http://localhost:3000' n'est donc pas autorisée. La réponse avait le code d'état HTTP 500.

Cela ressemble à un CORS mais je fais beaucoup d'autres demandes (obtenir des requêtes) et il n'y a pas d'erreurs CORS ... de toute façon, quand j'essaie de me connecter corps dans le serveur comme: print request.body.parse() le journal est:

127.0.0.1 - - [17/août/2017 18:18:45] « POST /api/v3.6/save_day_titles HTTP/1.0 » 500 765 b
''

la chose étrange est, avec CURL la demande est succesful:

curl -H "Content-Type: application/json" -X POST -d '{ "date": "2017-08-15", "titles": [{"title": "title test", "url":"xxx/xxx", "category": "category test"}] }' "xxx/api/v3.6/save_day_titles". 

Le Axios Config semble être ok:

date: "{"date":"2017-08-01","titles":[{"title":"title test","url":"xxx/xxx","category":"category test"}]}" 
headers: 
    Accept: "application/json, text/plain, */*" 
    Content-Type: "application/json;charset=utf-8" 

Donc, je viens d'obtenir stucked ici, ne peut pas comprendre le problème, une idée? allusion?

Merci d'avance.

Answer 1

Votre navigateur effectue un CORS preflight OPTIONS request, mais une erreur interne se produit sur votre serveur lorsqu'il reçoit cette requête. Le serveur renvoie donc une réponse d'erreur 500 à la demande.

et le serveur n'ajoute pas l'en-tête de réponse Access-Control-Allow-Origin lorsqu'il a une défaillance interne et envoie une réponse d'erreur 500, alors vous finissez par voir ce message d'erreur CORS. Donc, le vrai problème n'est pas une erreur CORS, mais plutôt un problème interne au serveur - et pour cette raison, pour trouver une solution à cela, vous devez regarder les journaux du serveur du côté serveur et voir ce que message que le serveur enregistre sur la cause lorsque cette erreur 500 se produit.

La chose étrange est, avec CURL la demande est succesful:

curl -H "Content-Type: application/json" -X POST \-d '{ "date": "2017-08-15", "titles": [{"title": "title test", "url":"xxx/xxx", "category": "category test"}] }' "xxx/api/v3.6/save_day_titles". 

Ce teste une demande POST. Votre navigateur ne passe jamais à POST; Au lieu de cela, il fait d'abord un CORS preflight OPTIONS request, mais quand il reçoit cette réponse 500 erreur à cette demande OPTIONS, c'est un échec de contrôle en amont, de sorte que le navigateur ne passe jamais à faire le POST.

Donc, pour simuler le comportement du navigateur en utilisant curl, vous devez d'abord envoyer une OPTIONS demande:

curl -X OPTIONS -i -H 'Origin: http://localhost:3000' \ 
    -H 'Access-Control-Request-Method: POST' \ 
    -H 'Access-Control-Request-Headers: Content-Type' \ 
    xxx/api/v3.6/save_day_titles 

Cela devrait rendre le serveur vous redonner la réponse même 500 d'erreur que vous voyez dans le navigateur.

Notez que la raison pour laquelle le navigateur n'est que CORS preflight OPTIONS request parce que votre frontend code JavaScript ajoute l'en-tête de demande Content-Type: application/json, et c'est l'une des conditions qui déclenche les navigateurs de faire un contrôle en amont.