2017-09-12 3 views
1

Mise à jour: Corrigé. Il semble que la demande revenait en tant que 503 (comme il se doit), puis mon application s'est rafraichie et a affiché le message sans erreur: «Récupération échouée du chargement». Je ne voyais pas la réponse à cause de l'actualisation."Echec du chargement" - le chargement fonctionne dans Postman mais échoue dans Chrome & Safari


Je ne suis pas en mesure de faire une demande de récupération de mon hébergé localement Create-React-App à mon serveur Node hébergé Heroku.

Mon serveur de noeud a activé CORS. Si je fais une requête POST via Postman, j'obtiens une réponse appropriée (503, car actuellement il n'y a pas de base de données connectée, donc les données ne sont pas sauvegardées.) Si je devais renvoyer une réponse différente, faites le moi savoir). Ma demande Postman a 'application/json' comme type de contenu, aucune autorisation, et un corps de { "rating": "5", "zipcode": "0" }.

Toutefois, lorsque je fais une requête POST à ​​partir de mon application React, j'obtiens un message dans ma console: "Fetch failed loading: OPTIONS" https://shielded-gorge-69158.herokuapp.com/feedback "." Il n'y a pas d'erreur associée, seulement le message. Il n'y a aucune information sur la demande dans mon panneau de réseau.

La requête d'extraction fonctionne lorsque je le fais localement, de localhost: 3000 (mon application) à localhost: 5000 (mon serveur). Il échoue seulement quand j'essaye de faire la demande au serveur (autrement identique) hébergé sur Heroku.

C'est ce que la demande de récupération ressemble:

return fetch('https://shielded-gorge-69158.herokuapp.com/feedback', { 
    method: 'POST', 
    headers: { 
    'Content-type': 'application/json' 
    }, 
    body: JSON.stringify({ rating: userRating, zipcode: userZip }) 
}).then(res => { 
if (!res.ok) { 
    throw new Error('Error:', res.statusText); 
} 
    return res; 
}).catch(err => console.error(err)); 

Edit: Je continue à la recherche et il semble que Postman ne devrait pas/ne fait pas les demandes de contrôle en amont (https://github.com/postmanlabs/postman-app-support/issues/2845). Alors peut-être que c'est le problème - mais pourquoi la requête fonctionnerait-elle quand mon serveur est local, mais pas quand il est hébergé sur Heroku?

+0

Pouvez-vous ajouter un peu plus à votre code et essayer d'ajouter un 'catch' après' then' à 'fetch'. Peut-être qu'une erreur plus détaillée peut montrer ce qui est faux. – bennygenel

+0

Lorsque vous effectuez une requête de locale à locale qu'elle ne vérifie pas CORS, lorsque vous effectuez une requête à partir de facteur il fait verbe donné (post, put, delete, get, ...) immédiatement. Quand vous le faites d'un domaine à un autre (local à heroku) et le faites depuis le navigateur, avant que le verbe browser fasse une requête d'options pour vérifier quels en-têtes sont autorisés et d'autres choses ... – KondukterCRO

Répondre

1

utilisez 'Content-Type' au lieu de 'Content-Type'.

https://developer.mozilla.org/en-US/docs/Web/HTTP/Access_control_CORS#Simple_requests https://fetch.spec.whatwg.org/#cors-safelisted-request-header

Explication: lorsque vous utilisez le cas incorrect, alors il est considéré comme un en-tête personnalisé et, par conséquent, une demande est envoyée prévol dans de tels cas. Maintenant, si la requête OPTIONS est implémentée sur le serveur avec les spécifications cors correctes, alors le POST suivant sera envoyé, sinon il ne sera pas envoyé et la requête échouera. Plus sur cela dans les liens ci-dessus.