4

Esto antes funcionaba perfectamente, ahora misteriosamente no lo hace...

Tengo una primera página html con un enlace. Al hacer click en el enlace quiero traer contenido de otra página mediante Ajax y mostrarlo en un div en la primera página.

El fallo lo da en la línea que carga el archivo "contenido-ajax-html":

$("#destino").load("contenido-ajax.html");

El error que da el navegador Chrome es el siguiente:

Access to XMLHttpRequest at 'file:///C:/misphp/contenido-ajax.html' from origin 'null' has been blocked by CORS policy: Cross origin requests are only supported for protocol schemes: http, data, chrome, chrome-extension, https.

Si abro el navegador Mozilla funciona correctamente. Antes también funcionaba correctamente con Chrome y ahora no. He probado en dos ordenadores más con Chrome y dan el mismo error...

Este error lo da en local, si lo subo a un servidor se ejecuta correctamente.

¿Por qué no funciona en local?

Gracias

<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js" type="text/javascript"></script>
<script>
	
	$(document).ready(function()
	{
		$("#enlaceajax").click(function(evento)
		{
			evento.preventDefault();
			$("#destino").load("contenido-ajax.html");
			//alert("");
		});
	})

</script>

</head>

<body>

<a href="#" id="enlaceajax">Haz clic!</a>
<br>
<div id="destino"></div>

</body>

</html>

2
  • 2
    Tienes que poner un servidor local, por cuestiones de seguridad chrome en sus ultimos patch bloquea las solicitudes que no vengan de un origin valido en este caso: file:///C:/misphp/
    – Bryro
    Commented el 22 nov. 2018 a las 13:02
  • en el servidor donde tengas tu html, en la carpeta de la raíz hay un archivo llamado .htaccess. Modifícalo y añade al final del todo una nueva línea con este código Header set Access-Control-Allow-Origin "*"guarda el archivo y actualiza, luego pulsa de nuevo en el enlace a ver si carga tu html
    – Juanant
    Commented el 22 nov. 2018 a las 13:16

2 respuestas 2

5

Lo que sucede es que necesita un servidor web para ejecutarse correctamente, si usas Linux puedes instalar Apache y poner tu proyecto en la carpeta /var/www/html, y en el navegador ejecutarlo como: localhost/capeta_proyecto

También puedes probarlo con Firefox y funcionará; por seguridad, en las nuevas actualizaciones de Google, ya no se permite correr aplicaciones que usan Ajax, JavaScript o JQuery sin un servidor web (que usan protocolo http)

Una solución rápida y efectiva puede ser usar la extensión de Chrome Web server for chrome, que puedes descargar desde aquí

Una vez instalada, solo debes escoger el directorio donde tienes tu página web y él lo cargará en ese servidor:

extensión de web server

1

Mi solución fue correr todo el sitio en un servidor local usando http-server, así:

npm install http-server -g
# Ir a la carpeta donde están los archivos estaticos. p.ej: cd el/path/a/los/archivos/
http-server

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge you have read our privacy policy.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.