web-dev-qa-db-fra.com

Activation de CORS dans Create React Utility)

J'ai besoin d'utiliser CORS module de noeud dans React créé en utilisant create-react-app utilitaire.

Étant donné que c'est un utilitaire, je ne peux pas modifier l'intérieur et injecter CORS dans préconfiguré EXPRESS = module.

Comment pouvons-nous y parvenir?

expresscorscreate-react-app
11
Swapnil Kadu

Si vous en avez besoin pour le développement et que vous souhaitez accéder à une API depuis votre application React mais que vous obtenez une erreur comme celle-ci-

Failed to load http://localhost:8180/tables: 
The 'Access-Control-Allow-Origin' header has a value 'http://localhost:8180'
that is not equal to the supplied Origin. Origin 'http://localhost:3000' is
therefore not allowed access. Have the server send the header with a valid
value, or, if an opaque response serves your needs, set the request's mode to
'no-cors' to fetch the resource with CORS disabled.

alors vous pouvez obtenir le serveur create-react-app pour proxy votre demande à votre serveur api assez facilement.

create-react-app utilise le serveur de développement webpack pour servir votre application react.

Donc, si votre application React est diffusée à partir de http://localhost:3000 et l'api auquel vous souhaitez vous connecter est à http://localhost:8180/tables vous pouvez simplement ajouter une valeur proxy dans le fichier package.json de votre application Rea comme ceci-

    proxy: "http://localhost:8180",

puis à partir de votre application réagir, appelez votre API comme

fetch('/tables').then(....)

la demande sera envoyée au serveur create-react-app qui l'enverra au serveur api et retournera les résultats pour vous.

Tous les détails ici Demandes d'API proxy dans le développement

12
Dave Pile