javascript - exitosa - falta la cabecera cors ''access-control-allow-origin'' ajax

Las solicitudes de origen cruzadas solo son compatibles con HTTP, pero no son dominios cruzados

Question

Estoy usando este código para hacer una solicitud de 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/nombreweb/resources/templates/signup.php. Las solicitudes de origen cruzadas solo son compatibles con HTTP.

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

¿Como puedó resolver esté problema?

Answer 1

Estaba obteniendo el mismo error al intentar cargar simplemente archivos HTML que usaban datos JSON para llenar la página, así que usé node.js y lo expresé para resolver el problema. Si no tiene un nodo instalado, primero debe instalar el nodo .

1. Instale 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 guardar server.js, puede ejecutar el servidor usando:

node server.js

5. Vaya a http://localhost:8000/FILENAME y debería ver el archivo HTML que estaba tratando de cargar

Answer 2

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.html , y no, C::///users/myhtmlfile.html . Tenga en cuenta que la url que se transfiere a 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);
                            }
                        });
                    }
                });
            });

Answer 3

He tenido suerte al comenzar Chrome con el siguiente cambio:

--allow-file-access-from-files

En os x try (vuelva a escribir los guiones si copia pegar):

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

En otro * nix ejecutado (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"

Answer 4

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

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

para leer algo como:

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

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

Answer 5

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 cruzadas solo son compatibles con HTTP.

Chrome y otros navegadores modernos han implementado restricciones de seguridad para Cross Origin Requests, lo que significa que no puede cargar nada a través de file: ///, necesita usar el protocolo http: // en todo momento, incluso de forma local, debido a políticas de Same Origin. 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, incluyendo el buen viejo Apache (con VirtualHosts si está ejecutando varios otros proyectos), node.js con Express, un servidor de 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 el servidor SimpleHTTPS de Python. Viene incluido con Python para que no necesites instalar o configurar nada.

Entonces cd a su directorio de proyecto, por ejemplo

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

1 python -m SimpleHTTPServer Y listo, verá este mensaje en su 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:8000 con todos sus archivos de directorio servidos allí. Puede configurar el puerto y otras cosas, solo vea la documentación. Pero este simple truco funciona para mí cuando tengo prisa por probar una nueva biblioteca o idear una nueva idea.

¡Aquí tienes, feliz codificación!

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

Answer 6

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

npm install -g http-server

Cambie los directorios al directorio donde desea servir archivos desde:

$ cd ~/projects/angular/current_project 

Ejecute el servidor:

$ http-server 

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

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

Eso le permite usar urls en su navegador como

http://your_ip:8080/index.html