No se produce ningún error CORS al realizar solicitudes GET, pero se produce un error CORS al realizar solicitudes POST.

12 Jun, 2023 Programación 0

Tengo un servidor Node/Express que interactúa con una aplicación React.

Necesito hacer solicitudes POST y GET, pero el problema es que al hacer solicitudes POST obtengo un error CORS, lo usual:

Acceso a 'http://localhost:9000/testAPI' desde el origen 'http://localhost:3000' ha sido bloqueado por la política CORS: La respuesta a la solicitud de preautorización no cumple con la comprobación de control de acceso: No se ha encontrado la cabecera 'Access-Control-Allow-Origin' en el recurso solicitado. Si una respuesta opaca cumple sus necesidades, establezca el modo de la solicitud en 'no-cors' para buscar el recurso con CORS deshabilitado.

Especifiqué en la respuesta del servidor la cabecera Access-Control-Allow-Origin, pero no estoy seguro si tengo que establecer esta cabecera para una solicitud POST también. Y si lo hago, ¿qué dominio debería especificar?

Tampoco quiero usar hacks como extensiones CORS o paquetes npm. Quiero usar CORS.

El lado del servidor se ve así:

const express = require("express");
const router = express.Router();

router.get("/", (req, res, next) => {
    console.log(req.url);

    res.setHeader("Access-Control-Allow-Origin", "http://localhost:3000");
    res.send("La API funciona correctamente");
});

module.exports = router;

En la aplicación React, la solicitud GET se ve así (funciona perfectamente):

const res = await fetch('http://localhost:9000/testAPI');

console.log(res);

La solicitud POST se ve así (genera un error CORS):

const res = await fetch('http://localhost:9000/testAPI', {
    method: 'POST',
    mode: 'cors',
    cache: 'no-cache',
    headers: {
      'Content-Type': 'application/json',
    },
    body: JSON.stringify({ someData: 'Las solicitudes POST funcionan correctamente' })
});

¿Necesito especificar algunas cabeceras o propiedades adicionales en la solicitud POST? ¿O tengo que modificar algo en el lado del servidor?

Si no tengo este problema al entrar en producción, entonces no me importaría usar un hack como una extensión CORS.

davy.ai

June 12, 2023 at 7:19 am

Solucionando errores de CORS en el servidor Node/Express con una aplicación React

Problema

Cuando una aplicación React envía solicitudes POST a un servidor Node/Express, aparece un error de CORS:

Access to fetch at 'http://localhost:9000/testAPI' from origin 'http://localhost:3000' has been blocked by CORS policy: Response to preflight request doesn't pass access control check: No 'Access-Control-Allow-Origin' header is present on the requested resource. If an opaque response serves your needs, set the request's mode to 'no-cors' to fetch the resource with CORS disabled.

Solución

Para solucionar este error, es necesario habilitar CORS en el servidor estableciendo el encabezado Access-Control-Allow-Origin. Este encabezado especifica qué dominios pueden acceder a los recursos del servidor.

En el código del servidor, ya se ha agregado este encabezado a la respuesta de la solicitud GET:

res.setHeader("Access-Control-Allow-Origin", "http://localhost:3000");

Sin embargo, este encabezado también debe agregarse a la respuesta de la solicitud POST. Puede especificar el mismo dominio que para la solicitud GET, ya que su aplicación React se aloja en `http://localhost:3000`.

router.post("/", (req, res, next) => {
    console.log(req.url);

    res.setHeader("Access-Control-Allow-Origin", "http://localhost:3000");
    res.send("La solicitud POST funciona correctamente");
});

Además, es necesario permitir el método de solicitud POST agregando el encabezado Access-Control-Allow-Methods a la respuesta:

res.setHeader("Access-Control-Allow-Methods", "POST");

También puede ser necesario permitir el encabezado Content-Type agregando el encabezado Access-Control-Allow-Headers:

res.setHeader("Access-Control-Allow-Headers", "Content-Type");

En el lado del cliente, también debe especificar la propiedad mode como cors en las opciones de la solicitud POST:

const res = await fetch('http://localhost:9000/testAPI', {
    method: 'POST',
    mode: 'cors',
    cache: 'no-cache',
    headers: {
      'Content-Type': 'application/json',
    },
    body: JSON.stringify({ someData: "Las solicitudes POST funcionan correctamente" })
});

Por defecto, la propiedad mode está establecida como same-origin, lo que impide las solicitudes entre diferentes orígenes. Especificarla como cors permite que se envíe la solicitud con CORS habilitado.

Si estos cambios no resuelven el problema, puede ser necesario solucionarlo más mediante la verificación de los registros del servidor y las solicitudes de red del navegador.

Si no desea utilizar soluciones temporales como extensiones de CORS o paquetes npm, estos cambios le permitirán utilizar CORS para manejar solicitudes entre diferentes orígenes entre su aplicación React y servidor Node/Express.

Answer

davy.ai

June 12, 2023 at 7:19 am
Solucionando errores de CORS en el servidor Node/Express con una aplicación React

Problema

Cuando una aplicación React envía solicitudes POST a un servidor Node/Express, aparece un error de CORS:
```
Access to fetch at 'http://localhost:9000/testAPI' from origin 'http://localhost:3000' has been blocked by CORS policy: Response to preflight request doesn't pass access control check: No 'Access-Control-Allow-Origin' header is present on the requested resource. If an opaque response serves your needs, set the request's mode to 'no-cors' to fetch the resource with CORS disabled.
```
Solución

Para solucionar este error, es necesario habilitar CORS en el servidor estableciendo el encabezado Access-Control-Allow-Origin. Este encabezado especifica qué dominios pueden acceder a los recursos del servidor.

En el código del servidor, ya se ha agregado este encabezado a la respuesta de la solicitud GET:
```
res.setHeader("Access-Control-Allow-Origin", "http://localhost:3000");
```
Sin embargo, este encabezado también debe agregarse a la respuesta de la solicitud POST. Puede especificar el mismo dominio que para la solicitud GET, ya que su aplicación React se aloja en `http://localhost:3000`.
```
router.post("/", (req, res, next) => {
    console.log(req.url);

    res.setHeader("Access-Control-Allow-Origin", "http://localhost:3000");
    res.send("La solicitud POST funciona correctamente");
});
```
Además, es necesario permitir el método de solicitud POST agregando el encabezado Access-Control-Allow-Methods a la respuesta:
```
res.setHeader("Access-Control-Allow-Methods", "POST");
```
También puede ser necesario permitir el encabezado Content-Type agregando el encabezado Access-Control-Allow-Headers:
```
res.setHeader("Access-Control-Allow-Headers", "Content-Type");
```
En el lado del cliente, también debe especificar la propiedad mode como cors en las opciones de la solicitud POST:
```
const res = await fetch('http://localhost:9000/testAPI', {
    method: 'POST',
    mode: 'cors',
    cache: 'no-cache',
    headers: {
      'Content-Type': 'application/json',
    },
    body: JSON.stringify({ someData: "Las solicitudes POST funcionan correctamente" })
});
```
Por defecto, la propiedad mode está establecida como same-origin, lo que impide las solicitudes entre diferentes orígenes. Especificarla como cors permite que se envíe la solicitud con CORS habilitado.

Si estos cambios no resuelven el problema, puede ser necesario solucionarlo más mediante la verificación de los registros del servidor y las solicitudes de red del navegador.

Si no desea utilizar soluciones temporales como extensiones de CORS o paquetes npm, estos cambios le permitirán utilizar CORS para manejar solicitudes entre diferentes orígenes entre su aplicación React y servidor Node/Express.

Comments are closed.

es.davy.ai

¿Tienes una pregunta?