Opciones de ReactJS CORS

En ReactJS , el intercambio de recursos de origen cruzado (CORS) se refiere al método que le permite realizar requests al servidor implementado en un dominio diferente. Como referencia, si el frontend y el backend están en dos dominios diferentes, necesitamos CORS allí. 

Método para configurar requests de CORS en la aplicación de reacción en el nivel de front-end:

• En axios: Axios siempre usa la URL base para iniciar la solicitud y el navegador confirma que, al principio, las OPCIONES HTTP solicitan por sí mismo. Muchas veces necesitamos pasar tokens para la autenticación y el token que estamos usando es identificado por Bearer. Ahora, la parte principal que necesitamos es pasar algunos encabezados adicionales para CORS llamados Access-Control-Allow-Credentials . Este es obligatorio porque el navegador necesita confirmar el servidor si tiene permiso para acceder a los recursos.
• En recuperación: para usar CORS en recuperación, debemos usar la opción de modo y establecerla en cors.

const response = await fetch("https://api.request.com/api_resource", {
    method: "GET",
    mode: "cors",
    headers: {
        Authorization: `Bearer: ${token}`,
        "Content-Type": "application/json",
    },
    body: JSON.stringify(data),
});

console.log(response.json());

Vamos a crear una aplicación en reaccionar para demostrar los conceptos anteriores:

Creación de la aplicación React

Paso 1: Cree una aplicación React usando el siguiente comando:

npx create-react-app example

Paso 2: después de crear la carpeta de su proyecto, es decir, ejemplo, muévase a ella con el siguiente comando:

cd example

Paso 3: aquí estamos usando la biblioteca Axios para obtener datos de API, necesitamos instalar eso usando el comando desde el directorio raíz.

npm install axios

Estructura del proyecto: Se verá así.

Estructura del proyecto

Ejemplo: demostración de las opciones de CORS en ReactJS. Escriba el siguiente código en el archivo index.js y App.js.

import React from "react";
import ReactDOM from "react-dom";
import "./index.css";
import App from "./App";
import reportWebVitals from "./reportWebVitals";
  
ReactDOM.render(
    <React.StrictMode>
        <App />
    </React.StrictMode>,
    document.getElementById("root")
);
  
reportWebVitals();

import React, { useEffect, useState } from "react";
import axios from "axios";
  
function App() {
    const [isLoading, setLoading] = useState(true);
    const [pokemon, setPokemon] = useState();
  
    const baseurl = "https://pokeapi.co/";
  
    useEffect(() => {
        axios.get(`${baseurl}api/v2/pokemon/5`).then((response) => {
            setPokemon(response.data);
            setLoading(false);
        });
    }, []);
  
    if (isLoading) {
        return (
            <div
                style={{
                    display: "flex",
                    flexDirection: "column",
                    alignItems: "center",
                    justifyContent: "center",
                    height: "100vh",
                    backgroundColor: "grey",
                }}
            >
                Loading...
            </div>
        );
    }
  
    return (
        <div
            style={{
                display: "flex",
                flexDirection: "column",
                alignItems: "center",
                justifyContent: "center",
                height: "100vh",
                backgroundColor: "grey",
            }}
        >
            <div>{pokemon.name}</div>
            <img alt={pokemon.name} src={pokemon.sprites.front_default} />
        </div>
    );
}
  
export default App;

Paso para ejecutar la aplicación : Abra la terminal y escriba el siguiente comando.

npm start

Salida: Veremos la siguiente salida en la pantalla del navegador.

producción

Podemos ver en la consola que no hay ningún error CORS. Por lo tanto, manejamos con éxito el CORS en reaccionar.