Cómo eliminar el error de política CORS de la consola de tus vhosts locales en XAMPP

Descubrí este problema al implementar la función CDN en mi sitio web, ya que está alojado en otro subdominio (cdn.domain.com), el problema no es visible en producción ya que la URL de CDN está alojada en el mismo dominio (como un subdominio ). Pero, en mi entorno local, decidí usar 2 TLD diferentes (dominio de nivel superior) para la aplicación y la CDN. Cuando intenté acceder a algunos recursos desde la CDN local, apareció el siguiente mensaje:

El acceso a la fuente en 'http: //cdnmydomain/assets/fonts/font-awesome/webfonts/fa-solid-900.ttf' desde el origen 'http: // mydomain' ha sido bloqueado por la política de CORS: No 'Control de acceso El encabezado -Allow-Origin 'está presente en el recurso solicitado.

En mi caso, tengo los 2 dominios como alias en el archivo de hosts de Windows:

# Copyright (c) 1993-2009 Microsoft Corp.
# C:\Windows\System32\drivers\etc\hosts

# Points to the localhost
127.0.0.1   mydomain
127.0.0.2	cdnofmydomain

La IP local está dirigida a través de XAMPP, con un host virtual Apache que se ve así (cdnofmydomain):

<VirtualHost 127.0.0.2:80>
    DocumentRoot "C:/xampp/htdocs/myproject/static"
    DirectoryIndex index.php

    <Directory "C:/xampp/htdocs/myproject/static">
        AllowOverride All
        Order Allow,Deny
        Allow from All
    </Directory>
</VirtualHost>

Simplemente sirve los archivos en el directorio c:/xampp/htdocs/myproject/static. La solución, para permitir que midominio acceda al contenido del otro dominio, sería simplemente necesario agregar la siguiente instrucción dentro del bloque Directorio del host virtual:

Header Set Access-Control-Allow-Origin "*"

Con esta instrucción, básicamente está agregando el encabezado de respuesta Access-Control-Allow-Origin a cada solicitud que indica que la respuesta se puede compartir desde el origen dado. En este caso, el caracter * permite el acceso desde cualquier dominio. El host virtual con la instrucción se ve así:

<VirtualHost 127.0.0.2:80>
    DocumentRoot "C:/xampp/htdocs/myproject/static"
    DirectoryIndex index.php

    <Directory "C:/xampp/htdocs/myproject/static">
        AllowOverride All
        Order Allow,Deny
        Allow from All

        # Permitir el acceso al dominio estático desde cualquier lugar
        # Nota: en producción, esto no es ideal, solo para dominios locales, con fines de prueba
        Header Set Access-Control-Allow-Origin "*"
    </Directory>
</VirtualHost>

Como dije, esto funciona muy bien para el entorno local, sin embargo, si decide implementar tal cosa en algún tipo de servidor de producción, sería mejor permitir el acceso desde dominios específicos y no desde todas partes, por ejemplo, para otorgar acceso. solo a un dominio específico:

Header Set Access-Control-Allow-Origin "http://mydomain"

Otorgar acceso desde múltiples dominios

Como solo puede haber un dominio CRS en el encabezado Access-Control-Allow-Origin, si necesitas otorgar acceso desde dominios específicos, puede usar el siguiente truco:

SetEnvIf Origin "http(s)?://(www\.)?(domain1.com|domain2.com|subdomain.domain3.com)$" AccessControlAllowOrigin=$0
Header add Access-Control-Allow-Origin %{AccessControlAllowOrigin}e env=AccessControlAllowOrigin

Con esta instrucción, estamos creando una variable de entorno que se asignará solo si el origen coincide con la expresión regular dada, donde puedes reemplazar los dominios que necesitas permitir. Dentro de un host virtual, se ve así:

<VirtualHost 127.0.0.2:80>
    DocumentRoot "C:/xampp/htdocs/myproject/static"
    DirectoryIndex index.php

    <Directory "C:/xampp/htdocs/myproject/static">
        AllowOverride All
        Order Allow,Deny
        Allow from All

        SetEnvIf Origin "http(s)?://(www\.)?(domain1.com|domain2.com|subdomain.domain3.com)$" AccessControlAllowOrigin=$0
        Header add Access-Control-Allow-Origin %{AccessControlAllowOrigin}e env=AccessControlAllowOrigin
    </Directory>
</VirtualHost>

Que te diviertas ❤️!

Esto podria interesarte

Conviertete en un programador más sociable