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

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?

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.

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"

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

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

5. Vá para http://localhost:8000/FILENAMEe você verá o arquivo HTML que está tentando carregar

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

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);
                            }
                        });
                    }
                });
            });

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

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

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