Autoriser CORS dans React

Nous présenterons CORS et comment l’autoriser dans React.

CORS en React

Les développeurs ont eu du mal avec CORS car c’est un concept délicat, comme pour les nouveaux développeurs qui ont récemment commencé à travailler avec des API tierces à partir d’applications d’une seule page sur React.

CORS signifie partage de ressources entre origines ; c’est un protocole comme HTTPS qui définit des règles de partage de ressources d’une origine différente. Il nous permet d’accéder à une ressource d’une origine différente et remplace le comportement par défaut de notre navigateur en raison de SOP.

Lorsqu’un client demande une ressource, la réponse contient un tampon indiquant à notre navigateur d’autoriser le partage de ressources entre différentes origines.

Une fois que notre navigateur a identifié ce tampon, les réponses aux demandes provenant de différentes origines sont autorisées à passer.

Prenons un exemple utilisant une API nommée https://jsonplaceholder.typicode.com.

Nous pouvons activer CORS en ajoutant un proxy API dans package.json. On va aller dans package.json et ajouter "proxy": "https://jsonplaceholder.typicode.com".

Le package.json ressemblera à ceci.

# react
{
  "name": "react",
  "version": "1.0.0",
  "description": "React example starter project",
  "keywords": ["react", "starter"],
  "proxy": "https://jsonplaceholder.typicode.com",
  "main": "src/index.js",
  "dependencies": {
    "react": "17.0.2",
    "react-dom": "17.0.2",
    "react-scripts": "4.0.0"
  },
  "devDependencies": {
    "@babel/runtime": "7.13.8",
    "typescript": "4.1.3"
  },
  "scripts": {
    "start": "react-scripts start",
    "build": "react-scripts build",
    "test": "react-scripts test --env=jsdom",
    "eject": "react-scripts eject"
  },
  "browserslist": [">0.2%", "not dead", "not ie <= 11", "not op_mini all"]
}

React CORS est activé et l’API fonctionne correctement sans erreur.