La API funciona desde Postman, pero obtengo un error al realizar una publicación desde Angular.

02 Aug, 2023 Programación 0

Tengo una solicitud POST que estoy realizando desde Postman, la cual funciona perfectamente, pero cuando hago una publicación a través de Angular, obtengo el siguiente error:

[Error] XMLHttpRequest no puede cargar (DOMINIO) debido a controles de acceso.

Después de revisar varias respuestas aquí y en Google, llegué a la conclusión de que debo cambiar el archivo web.config y Express para habilitar el CORS.

La aplicación NODE está alojada en IIS, y ya agregué las customHeaders al archivo web.config:

<customHeaders>
 <add name="Access-Control-Allow-Origin" value="*" />
 <add name="Access-Control-Allow-Methods" value="GET,PUT,POST,DELETE,OPTIONS" />
 <add name="Access-Control-Allow-Headers" value="Content-Type" />
</customHeaders>

El código de Angular es muy sencillo:

let APIURL = sessionStorage.getItem('endPoint') + "outside/login";
    let options = { headers: new HttpHeaders().set('Content-Type', 'application/json') };
    let body: any = this.payLoad;
    this.httpClient.post(APIURL, JSON.stringify(body), options).subscribe(
      result => {
          .....
          .....
          .....
})

También agregué lo siguiente a Express:

app.options('*', cors())

pero aún obtengo este error.

Esto funcionaba perfectamente cuando estaba utilizando la dirección IP y el puerto 3000 en el servidor remoto. Todo se estropeó cuando configuré el dominio a través de IIS y configuré la redirección de URL.

Quiero hacer énfasis en esto: Funciona PERFECTAMENTE en Postman, pero falla a través de la aplicación (localhost o en el servidor web).

Gracias.

ACTUALIZACIÓN: Cuando detengo PM2 y detengo el sitio web de IIS, por supuesto que Postman no funciona, pero Angular muestra el mismo error, por lo que tiendo a pensar que el problema está a nivel de Angular (?).

Aquí está la regla de reescritura de IIS:

<rewrite>
    <rules>
        <rule name="ReverseProxyInboundRule1" stopProcessing="true">
            <match url="(.*)" />
            <action type="Rewrite" url="http://localhost:3000/{R:1}" />
        </rule>
    </rules>
</rewrite>

davy.ai

August 2, 2023 at 4:06 pm

El problema que estás encontrando se debe a la Política del Mismo Origen (Same-Origin Policy), la cual es aplicada por los navegadores web. Esta función de seguridad evita que las páginas web realicen peticiones a un dominio o puerto diferente al que sirvió la página web. Por lo tanto, cuando realizas una petición POST desde Angular a un dominio diferente al que aloja la aplicación de Angular, el navegador bloquea la petición.

Para resolver este problema, necesitas habilitar el Intercambio de Recursos de Origen Cruzado (Cross-Origin Resource Sharing, CORS) en el lado del servidor (en tu caso, el servidor IIS que aloja la aplicación node.js). Esto se puede lograr agregando las cabeceras necesarias al archivo web.config, como ya has hecho. Sin embargo, además de esto, necesitas configurar tu aplicación node.js para manejar correctamente las solicitudes previas (preflight requests), las cuales son solicitudes OPTIONS que realiza el navegador para verificar si el servidor permite la solicitud actual.

Para hacer esto en Express, puedes usar el middleware cors de la siguiente manera:

const cors = require('cors');
const app = express();

// habilitar CORS para todas las rutas
app.use(cors());
// manejar las solicitudes previas explícitamente
app.options('*', cors());

Asegúrate de instalar el paquete cors (npm install cors) si aún no lo has hecho.

Además, verifica que la regla de reescritura que has configurado en IIS esté correctamente configurada para redirigir las solicitudes a la URL correcta (en este caso, `http://localhost:3000`).

Con estos cambios, tu aplicación de Angular debería poder realizar solicitudes POST exitosas al servidor node.js, sin encontrar errores de CORS.

Answer

davy.ai

August 2, 2023 at 4:06 pm
El problema que estás encontrando se debe a la Política del Mismo Origen (Same-Origin Policy), la cual es aplicada por los navegadores web. Esta función de seguridad evita que las páginas web realicen peticiones a un dominio o puerto diferente al que sirvió la página web. Por lo tanto, cuando realizas una petición POST desde Angular a un dominio diferente al que aloja la aplicación de Angular, el navegador bloquea la petición.

Para resolver este problema, necesitas habilitar el Intercambio de Recursos de Origen Cruzado (Cross-Origin Resource Sharing, CORS) en el lado del servidor (en tu caso, el servidor IIS que aloja la aplicación node.js). Esto se puede lograr agregando las cabeceras necesarias al archivo web.config, como ya has hecho. Sin embargo, además de esto, necesitas configurar tu aplicación node.js para manejar correctamente las solicitudes previas (preflight requests), las cuales son solicitudes OPTIONS que realiza el navegador para verificar si el servidor permite la solicitud actual.

Para hacer esto en Express, puedes usar el middleware cors de la siguiente manera:
```
const cors = require('cors');
const app = express();

// habilitar CORS para todas las rutas
app.use(cors());
// manejar las solicitudes previas explícitamente
app.options('*', cors());
```
Asegúrate de instalar el paquete cors (npm install cors) si aún no lo has hecho.

Además, verifica que la regla de reescritura que has configurado en IIS esté correctamente configurada para redirigir las solicitudes a la URL correcta (en este caso, `http://localhost:3000`).

Con estos cambios, tu aplicación de Angular debería poder realizar solicitudes POST exitosas al servidor node.js, sin encontrar errores de CORS.

Comments are closed.

es.davy.ai

¿Tienes una pregunta?

La API funciona desde Postman, pero obtengo un error al realizar una publicación desde Angular.

Answer

davy.ai