Saltar al contenido

¿Cómo permitir CORS en react.js?

Esta es la respuesta más válida que te podemos aportar, sin embargo estúdiala pausadamente y analiza si es compatible a tu trabajo.

Solución:

Es mejor agregar el código de habilitación de CORS en el lado del servidor. Para habilitar CORS en la aplicación basada en NodeJS y ExpressJs, se debe incluir el siguiente código:

var app = express();

app.use(function(req, res, next) 
  res.header("Access-Control-Allow-Origin", "*");
  res.header("Access-Control-Allow-Headers", "Origin, X-Requested-With, Content-Type, Accept");
  next();
);

hay 6 formas de hacer esto en React,

número 1 y 2 y 3 son los mejores:

1-config CORS en el lado del servidor

2 conjuntos de encabezados manualmente como este:

resonse_object.header("Access-Control-Allow-Origin", "*");
resonse_object.header("Access-Control-Allow-Headers", "Origin, X-Requested-With, Content-Type, Accept");

3-config NGINX para proxy_pass que se explica aquí.

4-Omita la política de origen cruzado con la extensión chrom (¡solo para desarrollo y no recomendado!)

5-Omita la política de origen cruzado con la URL a continuación (solo para desarrollo)

"https://cors-anywhere.herokuapp.com/type_your_url_here"

6-uso proxy en tus package.json archivo:(solo para desarrollo)

si esta es tu API: http://45.456.200.5:7000/api/profile/

agrega esta parte en tu package.json expediente:
"proxy": "http://45.456.200.5:7000/",

y luego haga su solicitud con las siguientes partes de la API:

React.useEffect(() => 
    axios
        .get('api/profile/')
        .then(function (response) 
            console.log(response);
        )
        .catch(function (error) 
            console.log(error);
        );
);

Posible pregunta repetida de Cómo superar el problema CORS en ReactJS

CORS funciona agregando nuevos encabezados HTTP que permiten a los servidores describir el conjunto de orígenes que pueden leer esa información mediante un navegador web. Esto debe configurarse en el servidor para permitir dominios cruzados.

Puede resolver este problema temporalmente con un complemento de Chrome llamado CORS.

Recuerda algo, que puedes permitirte agregar una reseña si diste con el arreglo.

¡Haz clic para puntuar esta entrada!
(Votos: 0 Promedio: 0)



Utiliza Nuestro Buscador

Deja una respuesta

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *