Estoy creando un backend de C++ con cálculos pesados que están destinados a funcionar como una API JSON para conectar clientes. Para lograr esto, he usado HTTPServer en Poco::Net de las bibliotecas POCO C++.

Desafortunadamente, al crear dos clientes diferentes, resultó que una página web normal (HTML+JS) no puede usar Fetch para comunicarse con el backend debido a un error de CORS. Tengo entendido que necesitan usar el mismo localhost: y ese no es el caso cuando se abre manualmente el documento HTML en la computadora que también ejecuta el backend.

Todo lo que se me ocurre cuando busco es el consejo genérico que los servidores necesitan para habilitar CORS e incluir en la lista blanca los dominios relevantes. Desafortunadamente, no puedo encontrar documentación sobre cómo lograr esto. El único resultado relevante fue una respuesta a una pregunta relacionada en la que recomendó lo siguiente:

 response.set("Access-Control-Allow-Origin", "*");

Naturalmente, no se recomienda incluir todo en la lista blanca desde el punto de vista de la seguridad, pero el objetivo principal aquí es hacer que se ejecute localmente para continuar con el desarrollo. Desafortunadamente, parece que no hay diferencia y la consola del navegador todavía dice:

El acceso para buscar en 'http://localhost:6363/' desde el origen 'null' ha sido bloqueado por la política de CORS: la respuesta a la solicitud de verificación previa no pasa la verificación de control de acceso: no hay encabezado 'Access-Control-Allow-Origin' presentes en el recurso solicitado. Si una respuesta opaca satisface sus necesidades, establezca el modo de la solicitud en 'no-cors' para obtener el recurso con CORS deshabilitado.

Al pasar el error en la pestaña Red de Chrome, obtengo lo siguiente:

Error de uso compartido de recursos de origen cruzado: PreflightMissingAllowOriginHeader

Mi llamada JavaScript actual:

 const data = { test: 'test' } fetch('http://localhost:6363', { method: 'POST', headers: { 'Content-Type': 'application/json', }, body: JSON.stringify(data), }) .then(response => response.text()) .then(message => { console.log('Data retrieved:', message); }) .catch((error) => { console.error('Error:', error); });

¿Alguna sugerencia sobre cómo proceder?