Las solicitudes de origen cruzado solo son compatibles con HTTP, pero no es de dominio cruzado

Estoy usando este código para hacer una solicitud AJAX:

$("#userBarSignup").click(function(){
    $.get("C:/xampp/htdocs/webname/resources/templates/signup.php",
        {/*params*/},
        function(response){
            $("#signup").html("TEST");
            $("#signup").html(response);
        },
        "html");

Pero desde la consola de JavaScript de Google Chrome sigo recibiendo este error:

XMLHttpRequest no puede cargar el archivo: /// C: /xampp/htdocs/webname/resources/templates/signup.php. Las solicitudes de origen cruzado solo son compatibles con HTTP.

El problema es que el archivo signup.php está alojado en mi servidor web local, desde donde se ejecuta todo el sitio web, por lo que no es entre dominios.

¿Como puedó resolver esté problema?

Necesita ejecutar un servidor web y realizar la solicitud get a un URI en ese servidor, en lugar de realizar la solicitud get a un archivo; por ejemplo, cambiar la línea:

    $.get("C:/xampp/htdocs/webname/resources/templates/signup.php",

leer algo como:

    $.get("http://localhost/resources/templates/signup.php",

y la página de solicitud inicial también debe realizarse a través de http.

Tuve suerte al iniciar Chrome con el siguiente interruptor:

--allow-file-access-from-files

En os x intente (vuelva a escribir los guiones si copia y pega):

open -a 'Google Chrome' --args -allow-file-access-from-files

En otra ejecución * nix (no probado)

 google-chrome  --allow-file-access-from-files

o en Windows, edite las propiedades del acceso directo de Chrome y agregue el interruptor, por ejemplo

 C:\ ... \Application\chrome.exe --allow-file-access-from-files

hasta el final de la ruta "objetivo"

Si está trabajando en un pequeño proyecto de front-end y desea probarlo localmente, normalmente lo abriría apuntando su directorio local en el navegador web, por ejemplo ingresando file: /// home / erick / mysuperproject / index .html en su barra de URL. Sin embargo, si su sitio está intentando cargar recursos, incluso si están ubicados en su directorio local, es posible que vea advertencias como esta:

XMLHttpRequest no puede cargar el archivo: ///home/erick/mysuperproject/mylibrary.js. Las solicitudes de origen cruzado solo son compatibles con HTTP.

Chrome y otros navegadores modernos han implementado restricciones de seguridad para las solicitudes de origen cruzado, lo que significa que no puede cargar nada a través de file: ///, debe usar el protocolo http: // en todo momento, incluso localmente, debido a las políticas del mismo origen. Tan simple como eso, necesitaría montar un servidor web para ejecutar su proyecto allí.

Este no es el fin del mundo y hay muchas soluciones, incluido el viejo Apache (con VirtualHosts si está ejecutando varios otros proyectos), node.js con express, un servidor Ruby, etc. o simplemente modificando su configuración del navegador.

Sin embargo, hay una solución más simple y liviana para los perezosos. Puede usar SimpleHTTPServer de Python. ¡Ya viene incluido con Python, por lo que no necesita instalar ni configurar nada en absoluto!

Así que cd al directorio de tu proyecto, por ejemplo

1 cd / home / erick / mysuperproject y luego simplemente use

1 python -m SimpleHTTPServer Y eso es todo, verás este mensaje en tu terminal

1 Sirviendo HTTP en 0.0.0.0 puerto 8000 ... Así que ahora puede volver a su navegador y visitar http://0.0.0.0:8000todos los archivos de su directorio que se encuentran allí. Puede configurar el puerto y otras cosas, solo consulte la documentación. Pero este simple truco me funciona cuando tengo prisa por probar una nueva biblioteca o desarrollar una nueva idea.

¡Listo, codificación feliz!

EDITAR: En Python 3+, SimpleHTTPServer ha sido reemplazado por http.server. Entonces, en Python 3.3, por ejemplo, el siguiente comando es equivalente:

python -m http.server 8000

Recibí el mismo error al intentar cargar simplemente archivos HTML que usaban datos JSON para completar la página, así que usé node.js y express para resolver el problema. Si no tiene un nodo instalado, primero debe instalarlo .

1. Instalar express npm install express

2. Cree un archivo server.js en la carpeta raíz de su proyecto, en mi caso una carpeta encima de los archivos que quería servidor

3. Coloque algo como lo siguiente en el archivo server.js y lea sobre esto en el sitio express gihub:

   var express = require('express');
   var app = express();
   var path = require('path');
   
   // __dirname will use the current path from where you run this file 
   app.use(express.static(__dirname));
   app.use(express.static(path.join(__dirname, '/FOLDERTOHTMLFILESTOSERVER')));
   
   app.listen(8000);
   console.log('Listening on port 8000');
   

4. Después de haber guardado server.js, puede ejecutar el servidor usando:

node server.js

5. Vaya a http://localhost:8000/FILENAMEy debería ver el archivo HTML que estaba intentando cargar

Si tiene nodejs instalado, puede descargar e instalar el servidor usando la línea de comando:

npm install -g http-server

Cambie de directorio al directorio desde el que desea servir archivos:

$ cd ~/projects/angular/current_project 

Ejecute el servidor:

$ http-server 

que producirá el mensaje Iniciando servidor http, sirviendo en:

Disponible en: http: // your_ip: 8080 y http://127.0.0.1:8080

Eso le permite usar URL en su navegador como

http: // tu_ip: 8080 / index.html

Funciona mejor de esta manera. Asegúrese de que ambos archivos estén en el servidor. Al llamar a la página html, utilice la dirección web como:, http:://localhost/myhtmlfile.htmly no C::///users/myhtmlfile.html,. Asegúrese también de que la URL pasada al json es una dirección web como se indica a continuación:

$(function(){
                $('#typeahead').typeahead({
                    source: function(query, process){
                        $.ajax({
                            url: 'http://localhost:2222/bootstrap/source.php',
                            type: 'POST',
                            data: 'query=' +query,
                            dataType: 'JSON',
                            async: true,
                            success: function(data){
                                process(data);
                            }
                        });
                    }
                });
            });

REM kill all existing instance of chrome 
taskkill /F /IM chrome.exe /T
REM directory path where chrome.exe is located
set chromeLocation="C:\Program Files (x86)\Google\Chrome\Application"
cd %chromeLocation%
cd c:
start chrome.exe --allow-file-access-from-files

1. cambie la ruta de chromeLocation con la suya.

2. guardar arriba como archivo .bat.

3. arrastre y suelte su archivo en el archivo por lotes que creó. (Chrome ofrece la opción de restaurar páginas, así que si tiene páginas abiertas, simplemente presione restaurar y funcionará).

También puede iniciar un servidor sin Python usando php interpreter.

P.ej:

cd /your/path/to/website/root
php -S localhost:8000

Esto puede ser útil si desea una alternativa a npm, ya que la utilidad php viene preinstalada en algunos sistemas operativos (incluido Mac).

Para todos los usuarios de Python:

Simplemente vaya a su carpeta de destino en la terminal.

cd projectFoder

luego inicie el servidor HTTP para Python3 +:

python -m http.server 8000

Sirviendo HTTP en :: puerto 8000 (http: // [::]: 8000 /) ...

vaya a su enlace: http://0.0.0.0:8000/

Disfruta :)