Traiter avec CORS dans l'application Create React

Si vous avez déjà créé une application Web qui devait demander des données à un domaine différent, vous avez probablement dû vous habituer à la politique de son origine sur le navigateur et du navigateur. .

Dans cet article, nous allons apprendre à résoudre les problèmes CORS en utilisant les capacités de proxy de Create React App .

Le problème

Si notre application est hébergée sous un certain domaine (par exemple, domain1.com ) et tente d'envoyer une requête à une API résidant dans un domaine différent (par exemple, domain2.com ), puis à la même politique d'origine du navigateur. lance et bloque la demande.

CORS est une fonctionnalité qui permet à domain2.com de dire au navigateur que c'est cool pour domain1.com de lui envoyer des demandes, en envoyant certains en-têtes HTTP.

Cependant, CORS peut être difficile à comprendre, aussi les gens l’évitent-ils complètement en servant leur serveur et leur serveur sous le même omain in production.

Create React App nous permet de reproduire cette configuration en développement, de sorte que nous n’ayons pas à nous en occuper avec CORS. Deux options sont possibles: une très simple mais pas très flexible et une qui demande un peu plus de travail mais qui est très flexible.

Proxy automatique

Nous pouvons dire à Create React App d'intercepter les demandes avec des inconnus. les itinéraires et les envoyer à un domaine différent, en utilisant l'option proxy dans package.json . Cela ressemble à ceci:

 {
  "name": "client-flickr",
  "version": "0.1.0",
  "privé": vrai,
  "dépendances": {
    "réagir": "^ 16.8.6",
    "react-dom": "^ 16.8.6",
    "react-scripts": "^ 2.1.8"
  },
  "scripts": {
    "start": "react-scripts start",
    "build": "react-scripts build",
    "test": "test de réact-scripts",
    "éjecter": "réagir-scripts éjecter"
  },
  "proxy": "http: // localhost: 4000"
}

Lorsque nous démarrons notre application, elle sera servie sous http: // localhost: 3000 . Si nous demandons le chemin racine / Create React App répondra avec le code HTML correspondant à notre application. Mais si nous devions demander un chemin différent comme / api Create React App le transmettrait de manière transparente à http: // localhost: 4000 / api .

Si nous examinons Si le réseau vous demande dans les outils de développement de votre navigateur, nous verrons que la demande a été adressée à http: // localhost: 3000 / api mais il a en fait été desservi par http: // localhost : 4000 / api à l'insu du navigateur.

Cela ne peut pas être plus facile!

Proxication manuelle

Si nous avons besoin de plus de contrôle sur la manière dont ces requêtes inter-domaines sont effectuées, nous en avons un autre L'option, qui consiste à créer un fichier src / setupProxy.js ressemble à ceci:

 module.exports = function (app) {
  // ...
};

Cette fonction reçoit app un exemple d'application Express afin que nous puissions en faire ce que nous voulons.

Par exemple, nous pouvons utiliser un middleware tel que [19659019] http-proxy-middleware aux requêtes proxy exactement comme nous l'avons fait avec l'option proxy :

 const proxy = require ("http-proxy-middleware");

module.exports = app => {
  app.use (
    "/ api",
    Procuration({
      cible: "http: // localhost: 4000",
      changeOrigin: true
    })
  )
};

Mais nous pouvons aller plus loin et utiliser les options de http-proxy-middleware telles que pathRewrite pour modifier le chemin de la requête:

 const proxy = require (" http-proxy-middleware ");

module.exports = app => {
  app.use (
    "/ api",
    Procuration({
      cible: "http: // localhost: 4000",
      changeOrigin: true,
      pathRewrite: {
        "^ / api": "/ api / v1"
      }
    })
  )
};

Avec cette configuration, une demande faite à http: // localhost: 3000 / api / foo sera transmise à http: // localhost: 4000 / api / v1 / foo ].

Nous pourrions aussi ajouter un enregistreur comme morgan tant que nous y sommes:

 const proxy = require ("http-proxy-middleware");
const morgan = require ("morgan");

module.exports = app => {
  app.use (
    "/ api",
    Procuration({
      cible: "http: // localhost: 4000",
      changeOrigin: true,
      pathRewrite: {
        "^ / api": "/ api / v1"
      }
    })
  )

  app.use (morgan («combiné»));
};

Chaque fois qu’une requête est envoyée à notre proxy, elle est connectée à la console.

Les possibilités sont vraiment infinies.

Conclusion

Si votre application Web doit demander des données à partir d’une autre domaine, et vous voulez que votre environnement de développement imite une configuration de production où les services frontend et backend sont desservis à partir du même domaine, assurez-vous de consulter les proxy et src / setupProxy.js options de Créer une application React.

Pour en savoir plus sur le développement d'applications pour React avec Create React App? Consultez les articles ci-dessous et n'oubliez pas de visiter notre Toutes les choses réagissent pour un large éventail d'informations et de pointeurs sur tous les types de réactions.

---