REVISIÓN: No hay error de encabezado de origen de control de acceso en Angular

Uno de los mensajes de error más comunes que los desarrolladores de Angular pueden encontrar en su trabajo diario es:

no hay encabezado de origen de permiso de control de acceso presente en el recurso solicitado.

Este no es un problema angular específico, sino un CORS (Intercambio de recursos de origen cruzado) problema de encabezado. Podría significar que el servidor back-end está configurado para funcionar en un puerto o dominio diferente.

---

¿Cómo soluciono el error Sin control de acceso en Windows 10?

1. Realizar cambios a nivel de servidor

Si tiene acceso al servidor, habilite las solicitudes CROS agregando Acceso-Control-Permitir-Origen: * encabezamiento. Después de eso, configure cors entrada, bajo system.webServer en web.config archivo, como en el ejemplo siguiente.

• ”1.0″?
• habilitado ="cierto">
• origen =“ https://someorigin.domain.com”>
• método ="OBTENER"/>
• método ="CABEZA"/>
• </system.webServer>

Aquí, cors permitirá OBTENER y CABEZA solicitudes de https://someorigin.domain.com/.

Además, si está utilizando IIS (servicios de información de Internet) necesitarías descargar Módulo IIS CORS.

Tenga cuidado de especificar un dominio o una lista de dominios en lugar de *. De lo contrario, las solicitudes de origen cruzado al servidor se habilitarían desde cualquier lugar.

En apache, en el archivo de configuración, debe agregar la línea Encabezado establecido Access-Control-Allow-Origin '*'. Nuevamente, es aconsejable reemplazar el "*" por una lista de fuentes desde donde se realizarían las solicitudes.

---

2. Ejecute su propio servidor proxy

1. En primer lugar, crearemos un archivo de configuración de proxy, en la carpeta raíz de Angular, llamado src / proxy.conf.json, y escribe el siguiente código en él:
   • {"/ api":
   • "objetivo":" http://localhost: 6000 "," seguro ": falso}
   • }
2. En segundo lugar, en el angular.jsonarchivo, agregue el proxyConfigopción en el atender objetivo:
   • "atender": {
   • "constructor":" ",
     
   • "opciones":{"proxyConfig":"src / proxy.conf.json"}
     
   • }
3. Ahora ejecute la configuración actual con el ng servir mando.

Un servidor proxy enviaría sus solicitudes al servidor remoto. A continuación, veremos cómo configurar un servidor proxy.

Las solicitudes de datos en Angular son llamadas API a localhost, en el puerto 4200, como esta ubicación:

• http://localhost: 4200 / api / datareq.

Sin embargo, en el ejemplo anterior, asumimos que los datos solicitados están en este lugar:

• http://localhost: 6000 / api / datareq.

---

¿Interesado en buenas soluciones de proxy? Consulte esta lista de herramientas dedicadas

---

3. DPuede utilizar la Política del mismo origen en su navegador.

Nota: No se recomienda este método en particular, ya que puede exponer su navegador (y su sistema) a importantes riesgos de seguridad.

Si todo lo demás no funciona, puede recurrir a deshabilitar la Política del mismo origen en el navegador. Sin embargo, tenga cuidado, ya que esto expondría su navegador (y su sistema) a importantes riesgos de seguridad.

Para Google Chrome, en Windows 10, abra el símbolo del sistema como administrador y ejecute el siguiente comando:

C: Archivos de programa (x86) GoogleChromeApplicationchrome.exe "--disable-web-security --disable-gpu --user-data-dir = ~ / chromeTemp..

En conclusión, no hay encabezado de origen de permiso de control de acceso presente en el recurso solicitado El mensaje de error es un problema del lado del servidor.

Para los desarrolladores de Angular, modificar la configuración del servidor o usar un servidor proxy debería funcionar bien.

Díganos lo que piensa de esta guía en la sección de comentarios a continuación.

---

---