Permitir CORS en React

Presentaremos CORS y cómo permitirlo en React.

CORS en React

Los desarrolladores han tenido problemas con CORS porque es un concepto complicado, como para los nuevos desarrolladores que recientemente comenzaron a trabajar con API de terceros desde aplicaciones de una sola página en React.

CORS significa intercambio de recursos de origen cruzado; es un protocolo como HTTPS que define reglas para compartir recursos de un origen diferente. Nos permite acceder a un recurso desde un origen diferente y anula el comportamiento predeterminado de nuestro navegador debido a SOP.

Cuando un cliente solicita un recurso, la respuesta contiene un sello que le dice a nuestro navegador que permita compartir recursos entre diferentes orígenes.

Una vez que nuestro navegador identifica este sello, se permite el paso de las respuestas a las solicitudes que se originan en diferentes orígenes.

Veamos un ejemplo usando una API llamada https://jsonplaceholder.typicode.com.

Podemos habilitar CORS agregando un proxy API en package.json. Iremos a package.json y añadiremos "proxy": "https://jsonplaceholder.typicode.com".

El paquete.json se verá así.

# 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á habilitado y la API funciona bien sin errores.