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

88

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?

javascript 
— siannone
fuente
5
¿Ha intentado tal vez usar una URL HTTP en lugar de una ruta local?
— Edward Thomson
1
Sugeriría usar una URL completa
— Dominic Green
2
@EdwardThomson ¡Funcionó! Pero ahora tengo que configurar allow_url_include = Onmi servidor.
— siannone

Respuestas:

76

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.

— Petesh
fuente
Esto funcionó a las mil maravillas. Ahora tengo que establecer la configuración allow_url_include = Onde mi servidor. ¿Puedo habilitarlo de forma segura o causará algunos problemas de seguridad?
— siannone
El $ .get se emite en realidad en el contexto de javascript del navegador web, por lo que el archivo debe tener la referencia de URL; el código que está escrito en php aún puede hacer referencia a archivos locales sin problemas
— Petesh
44
Alternativamente, existe la solución Python: (1) navegue por la consola a la carpeta, (2) ingrese python -m SimpleHTTPServer 8888, luego (3) navegue por el navegador ahttp://localhost:8888/
— geotheory
+1 esto ayudó mucho a resolver mi problema. Muchas gracias :)
— Praveen
5
Nota para los usuarios de Python 3: usepython -m http.server 8888
— Jelle Fresen
113

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"

— prauchfuss
fuente
7
Trabaja en Google Chrome (por lo menos a partir del v24) en principio, pero que se nota en OS X se debe invocar la siguiente manera: open -a 'Google Chrome' --args —allow-file-access-from-files. También tenga en cuenta: si especifica una URL basada en file: // (en lugar de una ruta del sistema de archivos), asegúrese de usar en file://localhost/...lugar de file:///....
— mklement0
6
La última vez que intenté hacer esto en Windows, el método anterior no funcionó. Terminé teniendo que iniciar Chrome desde el indicador de DOS con el siguiente interruptor ... Imperfecto pero viable.
— prauchfuss
Funciona muy bien en Linux.
— user1205577
Funciona bien en OS X Yosemite 10.10.2 y Chrome versión 41.0.2272.89 (64 bits).
— The Dude
86

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
— Pramod Alagambhat
fuente
5
La solución perezosa es asombrosa. Muy sencillo, no necesita hacer nada más.
— Nico
equivalente existe en node.js también: simple-http-server
— StackHola
En Windows 8.1, aún tendría que instalar Python, ¿no?
— J86
Uso Xampp en Windows, es simple, aunque recomiendo usar el nodo, también no olvide desbloquear el puerto 80 en Skype para permitir que el servidor se ejecute
— Timo Huovinen
10

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

  1. Vaya a http://localhost:8000/FILENAMEy debería ver el archivo HTML que estaba intentando cargar
— thehme
fuente
4

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

— Rahul Reddy
fuente
1

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);
                            }
                        });
                    }
                });
            });
— ken4ward
fuente
0 
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á).

— YJDev
fuente
0

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).

— Pranav Kasetti
fuente
0

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 :)

— Shiwanshu Kumar
fuente
Al usar nuestro sitio, usted reconoce que ha leído y comprende nuestra Política de Cookies y Política de Privacidad.
Licensed under cc by-sa 3.0 with attribution required.