Encabezados de CORS

Cross Origin Resource Sharing (CORS) permite que se soliciten recursos restringidos en un sitio web desde otro dominio fuera del dominio desde el que se sirvió originalmente.

Este ejemplo explica cómo funciona esto:

• El sitio A agrega encabezados CORS para permitir el acceso del sitio B a un recurso en el sitio A, como por ejemplo una fuente.
• El sitio B puede acceder a ese recurso debido al encabezado CORS.

Sin el encabezado CORS, el sitio B no podría acceder al recurso en el sitio A. Consulta las siguientes páginas para obtener más detalles.

• en.wikipedia.org/wiki/Cross-origin_resource_sharing

Las siguientes solicitudes usan CORS.

• Invocaciones de las API XMLHttpRequest o Fetch.
• Fuentes Web (para el uso de fuentes entre dominios en @font-face dentro de CSS).
• Texturas WebGL.
• Imágenes/cuadros de video dibujados en un lienzo usando drawImage().
• Formas CSS a partir de imágenes

¿Qué significa esto?

Esto significa que las solicitudes a archivos como index.html no utilizarán CORS. Sin embargo, una solicitud a una fuente o archivo CSS utilizará CORS.

Los encabezados CORS se agregan a un archivo .htaccess en el directorio principal de tu sitio. Consulta el siguiente artículo para obtener más detalles.

• Configurar los encabezados con un archivo .htaccess

Los siguientes enlaces explican los encabezados CORS con más detalle.

• Access-Control-Allow-Headers
• Tutorial de CORS: Una Guía para Compartir Recursos Entre Orígenes
• developer.mozilla.org/en-US/docs/Web/HTTP/Headers/Access-Control-Allow-Origin
• developer.mozilla.org/en-US/docs/Web/HTTP/Headers/Access-Control-Allow-Methods
• developer.mozilla.org/en-US/docs/Web/HTTP/Headers/Access-Control-Allow-Headers

Los siguientes son dos ejemplos simples de cómo agregar encabezados CORS a tu sitio.

Valores Wildcard

Este ejemplo usa comodines para cada encabezado CORS:

Header add Access-Control-Allow-Origin: "*"
Header add Access-Control-Allow-Methods: "*"
Header add Access-Control-Allow-Headers: "*"

Valores específicos

Este ejemplo usa valores específicos para cada encabezado CORS:

Header add Access-Control-Allow-Origin: "https://example.com"
Header add Access-Control-Allow-Methods: "GET,POST,OPTIONS,DELETE,PUT"
Header add Access-Control-Allow-Headers: "Upgrade-Insecure-Requests"

Puedes correr el comando curl (vía SSH) para verificar que tus encabezados CORS estén funcionando.

[server]$ curl -I https://example.com/style.css
HTTP/1.1 200 OK
Date: Fri, 29 Mar 2024 20:06:59 GMT
Server: Apache
Upgrade: h2
Connection: Upgrade
Last-Modified: Tue, 26 Mar 2024 21:53:08 GMT
ETag: "2d-598e7d69349fd"
Accept-Ranges: bytes
Content-Length: 45
Access-Control-Allow-Origin: https://example.com
Access-Control-Allow-Methods: DELETE,PUT,OPTIONS,DELETE,PUT
Access-Control-Allow-Headers: Upgrade-Insecure-Requests
Content-Type: text/css

Ver también