As solicitações de origem cruzada são suportadas apenas para HTTP, mas não é entre domínios

88

Estou usando este código para fazer uma solicitação AJAX:

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

Mas, no console JavaScript do Google Chrome, continuo recebendo este erro:

XMLHttpRequest não pode carregar file: /// C: /xampp/htdocs/webname/resources/templates/signup.php. As solicitações de origem cruzada são suportadas apenas para HTTP.

O problema é que o arquivo signup.php está hospedado no meu servidor web local, de onde todo o site é executado, portanto não é entre domínios.

Como posso resolver esse problema?

javascript 
— siannone
fonte
5
Você já tentou talvez usar um URL HTTP em vez de um caminho local?
— Edward Thomson
1
Eu sugeriria o uso de um url completo
— Dominic Green
2
@EdwardThomson Funcionou! Mas agora tenho que definir a configuração allow_url_include = Ondo meu servidor.
— siannone

Respostas:

76

Você precisa realmente executar um servidor da web e fazer a solicitação get para um URI nesse servidor, em vez de fazer a solicitação get para um arquivo; por exemplo, mude a linha:

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

ler algo como:

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

e a página de solicitação inicial também precisa ser feita em http.

— Petesh
fonte
Isso funcionou como um encanto. Agora tenho que definir a configuração allow_url_include = Ondo meu servidor. Posso ativá-lo com segurança ou ele causará alguns problemas de segurança?
— siannone
O $ .get é realmente emitido no contexto javascript do navegador da web, de modo que o arquivo precisa ter a referência de URL - o código que é escrito em php ainda pode fazer referência a arquivos locais sem problemas
— Petesh
44
Como alternativa, há a solução Python: (1) navegue em um console até a pasta, (2) entre python -m SimpleHTTPServer 8888e (3) navegue no navegador atéhttp://localhost:8888/
— geotheory
+1 isso ajudou muito a resolver meu problema. Muito obrigado :)
— Praveen
5
Observação para usuários de Python 3: usepython -m http.server 8888
— Jelle Fresen
113

Tive sorte ao iniciar o Chrome com a seguinte opção:

--allow-file-access-from-files

No os x try (redigite os travessões se copiar e colar):

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

Em outro * nix run (não testado)

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

ou no Windows edite as propriedades do atalho do cromo e adicione a opção, por exemplo

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

ao final do caminho "alvo"

— prauchfuss
fonte
7
Funciona no Google Chrome (pelo menos a partir de v24), em princípio, mas nota que no OS X tem de invocá-lo da seguinte forma: open -a 'Google Chrome' --args —allow-file-access-from-files. Observe também: Se você especificar um URL baseado em arquivo: // (em vez de um caminho do sistema de arquivos), certifique-se de usar em file://localhost/...vez de file:///....
— mklement0
6
Da última vez que tentei fazer isso no Windows, o método acima não funcionou. Acabei tendo que iniciar o Chrome a partir do prompt do DOS com a opção seguinte ... Imperfeito, mas viável.
— prauchfuss
Funciona muito bem no Linux.
— user1205577
Funciona bem no OS X Yosemite 10.10.2 e Chrome versão 41.0.2272.89 (64 bits).
— The Dude
86

Se você está trabalhando em um pequeno projeto de front-end e deseja testá-lo localmente, normalmente você o abre apontando seu diretório local no navegador da web, por exemplo, digitando arquivo: /// home / erick / mysuperproject / index .html na sua barra de URL. No entanto, se seu site está tentando carregar recursos, mesmo que eles estejam localizados em seu diretório local, você poderá ver avisos como este:

XMLHttpRequest não pode carregar file: ///home/erick/mysuperproject/mylibrary.js. As solicitações de origem cruzada são compatíveis apenas com HTTP.

O Chrome e outros navegadores modernos implementaram restrições de segurança para solicitações de origem cruzada, o que significa que você não pode carregar nada por meio de file: ///, você precisa usar o protocolo http: // em todos os momentos, até mesmo políticas de mesma origem localmente devidas. Simples assim, você precisa montar um servidor web para executar seu projeto lá.

Este não é o fim do mundo e existem muitas soluções por aí, incluindo o bom e velho Apache (com VirtualHosts se você estiver executando vários outros projetos), node.js com express, um servidor Ruby, etc. ou simplesmente modificando seu configurações do navegador.

No entanto, existe uma solução mais simples e leve para os preguiçosos. Você pode usar o SimpleHTTPServer do Python. Ele já vem com o python, então você não precisa instalar ou configurar nada!

Então faça cd para o diretório do seu projeto, por exemplo

1 cd / home / erick / mysuperproject e então simplesmente use

1 python -m SimpleHTTPServer E é isso, você verá esta mensagem em seu terminal

1 Servindo HTTP na porta 0.0.0.0 8000 ... Agora você pode voltar ao seu navegador e visitar http://0.0.0.0:8000todos os seus arquivos de diretório servidos lá. Você pode configurar a porta e outras coisas, basta ver a documentação. Mas esse truque simplesmente funciona para mim quando estou com pressa para testar uma nova biblioteca ou desenvolver uma nova ideia.

Pronto, boa codificação!

EDIT: No Python 3+, SimpleHTTPServer foi substituído por http.server. Portanto, no Python 3.3, por exemplo, o seguinte comando é equivalente:

python -m http.server 8000
— Pramod Alagambhat
fonte
5
A solução preguiçosa é incrível. Muito simples, você não precisa fazer mais nada.
— Nico
equivalente também existe em node.js: simple-http-server
— StackHola
No Windows 8.1, você ainda teria que instalar o Python, não?
— J86
Eu uso o Xampp no ​​windows, é simples, embora eu recomendo usar o node, também não se esqueça de desbloquear a porta 80 no skype para permitir que o servidor rode
— Timo Huovinen
10

Eu estava recebendo o mesmo erro ao tentar carregar simplesmente arquivos HTML que usavam dados JSON para preencher a página, então usei node.js e express para resolver o problema. Se você não tem o nó instalado, você precisa instalar o nó primeiro.

  1. Instalar expresso npm install express

  2. Crie um arquivo server.js na pasta raiz do seu projeto, no meu caso uma pasta acima dos arquivos que eu queria servir

  3. Coloque algo como o seguinte no arquivo server.js e leia sobre isso no site 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. Depois de salvar server.js, você pode executar o servidor usando:

node server.js

  1. Vá para http://localhost:8000/FILENAMEe você verá o arquivo HTML que está tentando carregar
— thehme
fonte
4

Se você tiver nodejs instalado, poderá baixar e instalar o servidor usando a linha de comando:

npm install -g http-server

Altere os diretórios para o diretório de onde deseja servir os arquivos: 

$ cd ~/projects/angular/current_project

Execute o servidor:

$ http-server

que produzirá a mensagem Iniciando o servidor http, servindo em:

Disponível em: http: // your_ip: 8080 e http://127.0.0.1:8080

Isso permite que você use urls em seu navegador, como

http: // your_ip: 8080 / index.html

— Rahul Reddy
fonte
1

Funciona melhor assim. Certifique-se de que ambos os arquivos estejam no servidor. Ao chamar a página html, use o endereço da web como:, http:://localhost/myhtmlfile.htmle não C::///users/myhtmlfile.html,. Certifique-se também de que o url passado ao json é um endereço da web conforme indicado abaixo:

$(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
fonte
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. altere o caminho chromeLocation com o seu.

  2. salve acima como um arquivo .bat.

  3. arraste e solte seu arquivo no arquivo em lote que você criou. (o cromo oferece a opção de restaurar as páginas, portanto, se você tiver as páginas abertas, basta clicar em restaurar e funcionará).

— Yogesh Jog
fonte
0

Você também pode iniciar um servidor sem python usando o interpretador php.

Por exemplo:

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

Isso pode ser útil se você quiser uma alternativa ao npm, já que o utilitário php vem pré-instalado em alguns sistemas operacionais (incluindo Mac).

— Pranav Kasetti
fonte
0

Para todos os usuários de python:

Basta ir para a pasta de destino no terminal.

cd projectFoder

em seguida, inicie o servidor HTTP para Python3 +:

python -m http.server 8000

Servindo HTTP na :: porta 8000 (http: // [::]: 8000 /) ...

vá para o seu link: http://0.0.0.0:8000/

Aproveitar :)

— Shiwanshu Kumar
fonte
Ao utilizar nosso site, você reconhece que leu e compreendeu nossa Política de Cookies e nossa Política de Privacidade.
Licensed under cc by-sa 3.0 with attribution required.