El intercambio de recursos entre orígenes (CORS) es una característica de seguridad implementada por los navegadores web que impide que las páginas web realicen solicitudes a un dominio diferente al que sirvió la página web. Sin embargo, CORS se puede configurar en el lado del servidor para permitir o rechazar solicitudes de origen cruzado.

A continuación se muestran algunas formas de utilizar CORS en HTML5:

1. Configuración del lado del servidor: la configuración de CORS generalmente se configura en el lado del servidor. Asegúrese de que su servidor incluya los encabezados CORS apropiados en sus respuestas. Por ejemplo, en una aplicación Node.js Express, puedes usar el middleware cors :

    javascript
    const express = require('express');
   const cors = require('cors');
   
   const app = express();
   
   // Enable CORS for all routes
   app.use(cors());
   
   // Your routes and other middleware...
   
   app.listen(3000, () => {
     console.log('Server is running on port 3000');
   });
   

2. Atributo CORS en etiquetas HTML: algunas etiquetas HTML, como <img> , <script> y <link> , le permiten configurar el atributo crossorigin para manejar CORS para ciertos recursos:

    HTML
    <img src="https://example.com/image.jpg" alt="Image" crossorigin="anonymous">
   

   El valor anonymous indica que no se enviarán credenciales con la solicitud.

3. Fetch API: al realizar solicitudes utilizando Fetch API en JavaScript, puede incluir la opción mode para controlar el comportamiento de CORS:

    javascript
    fetch('https://example.com/api/data', {
     method: 'GET',
     mode: 'cors', // or 'no-cors' or 'same-origin'
     headers: {
       'Content-Type': 'application/json',
       // Other headers...
     },
   })
   .then(response => response.json())
   .then(data => console.log(data))
   .catch(error => console.error('Error:', error));
   

   Las mode opciones incluyen:

   • 'cors' : El navegador realiza una verificación CORS y agrega el encabezado Origin .
   • 'no-cors' : El navegador no realiza una verificación CORS. Úselo cuando no se requiere una solicitud de verificación previa de CORS.
   • 'same-origin' : No se realiza ninguna verificación CORS para solicitudes del mismo origen.

4. XMLHttpRequest: si está utilizando el objeto XMLHttpRequest anterior, puede establecer la propiedad withCredentials en true para incluir credenciales en la solicitud:

    javascript
    var xhr = new XMLHttpRequest();
   xhr.open('GET', 'https://example.com/api/data', true);
   xhr.withCredentials = true;
   xhr.send();
   

   Nota: El servidor también debe configurarse para permitir credenciales.

Recuerde que la configuración adecuada de CORS involucra tanto al lado del cliente como al del servidor. El servidor debe configurarse para manejar solicitudes CORS y el código del cliente debe estructurarse en consecuencia. Además, tenga en cuenta las implicaciones de seguridad al configurar CORS, especialmente al permitir solicitudes de origen cruzado desde cualquier origen ( '*' ).