XMLHttpRequest A origem nula não é permitida Access-Control-Allow-Origin para o arquivo: /// to file: /// (Serverless)

Estou tentando criar um site que pode ser baixado e executado localmente, iniciando seu arquivo de índice.

Todos os arquivos são locais, nenhum recurso é usado online.

Quando tento usar o plug-in AJAXSLT para o jQuery para processar um arquivo XML com um modelo XSL (em subdiretórios), recebo os seguintes erros:

XMLHttpRequest cannot load file:///C:/path/to/XSL%20Website/data/home.xml. Origin null is not allowed by Access-Control-Allow-Origin.

XMLHttpRequest cannot load file:///C:/path/to/XSL%20Website/assets/xsl/main.xsl. Origin null is not allowed by Access-Control-Allow-Origin.

O arquivo de índice que faz a solicitação é file:///C:/path/to/XSL%20Website/index.htmlenquanto os arquivos JavaScript usados ​​estão armazenados file:///C:/path/to/XSL%20Website/assets/js/.

Como posso fazer para corrigir esse problema?

Nos casos em que a execução de um servidor da web local não é uma opção, você pode permitir o acesso do Chrome aos file://arquivos por meio de uma opção de navegador. Após algumas pesquisas, encontrei essa discussão , que menciona uma opção de navegador na postagem de abertura. Execute sua instância do Chrome com:

chrome.exe --allow-file-access-from-files

Isso pode ser aceitável para ambientes de desenvolvimento, mas pouco mais. Você certamente não quer isso o tempo todo. Ainda parece ser um problema em aberto (a partir de janeiro de 2011).

Consulte também: Problemas com o jQuery getJSON usando arquivos locais no Chrome

Essencialmente, a única maneira de lidar com isso é ter um servidor da Web em execução no host local e atendê-los a partir daí.

Não é seguro para um navegador permitir que uma solicitação ajax acesse qualquer arquivo no seu computador; portanto, a maioria dos navegadores parece tratar solicitações "file: //" como não tendo origem para os fins da " mesma política de origem "

Iniciar um servidor da Web pode ser tão trivial quanto cdentrar no diretório em que os arquivos estão:

python -m SimpleHTTPServer

Aqui está um AppleScript que iniciará o Chrome com a opção - Permitir acesso a arquivos a partir de arquivos ativada, para os desenvolvedores do OSX / Chrome por aí:

set chromePath to POSIX path of "/Applications/Google Chrome.app/Contents/MacOS/Google Chrome"    
set switch to " --allow-file-access-from-files"
do shell script (quoted form of chromePath) & switch & " > /dev/null 2>&1 &"

Esta solução permitirá que você carregue um script local usando jQuery.getScript (). Essa é uma configuração global, mas você também pode definir a opção crossDomain por solicitação.

$.ajaxPrefilter( "json script", function( options ) {
  options.crossDomain = true;
});

Que tal usar a função javascript FileReader para abrir o arquivo local, ou seja:

<input type="file" name="filename" id="filename">
<script>
$("#filename").change(function (e) {
  if (e.target.files != undefined) {
    var reader = new FileReader();
    reader.onload = function (e) {
        // Get all the contents in the file
        var data = e.target.result; 
        // other stuffss................            
    };
    reader.readAsText(e.target.files.item(0));
  }
});
</script>

Agora clique no Choose filebotão e navegue até o arquivofile:///C:/path/to/XSL%20Website/data/home.xml

Inicie o chrome assim para ignorar esta restrição: open -a "/Applications/Google Chrome.app/Contents/MacOS/Google Chrome" --args --allow-file-access-from-files .

Derivado do comentário de Josh Lee, mas eu precisava especificar o caminho completo para o Google Chrome para evitar que o Google Chrome fosse aberto na minha partição do Windows (no Parallels).

A maneira como acabei de solucionar isso não é usar o XMLHTTPRequest, mas incluir os dados necessários em um arquivo javascript separado. (No meu caso, eu precisava de um blob SQLite binário para usar com https://github.com/kripken/sql.js/ )

Criei um arquivo chamado base64_data.js(e useibtoa() para converter os dados necessários e inseri-los em<div> para poder copiá-los).

var base64_data = "U1FMaXRlIGZvcm1hdCAzAAQA ...<snip lots of data> AhEHwA==";

e incluiu os dados no html como javascript normal:

<div id="test"></div>

<script src="base64_data.js"></script>
<script>
    data = atob(base64_data);
    var sqldb = new SQL.Database(data);
    // Database test code from the sql.js project
    var test = sqldb.exec("SELECT * FROM Genre");
    document.getElementById("test").textContent = JSON.stringify(test);
</script>

Eu imagino que seria trivial modificar isso para ler JSON, talvez até XML; Vou deixar isso como um exercício para o leitor;)

Você pode tentar colocar 'Access-Control-Allow-Origin':'*'em response.writeHead(, {[here]}).

use o 'servidor da web para o aplicativo Chrome'. (você realmente o possui no seu PC, quer você saiba ou não. basta pesquisar em cortana!). abra-o e clique em 'escolher arquivo' escolha a pasta com o seu arquivo. na verdade, não selecione seu arquivo. selecione sua pasta de arquivos e clique no (s) link (s) no botão 'escolher pasta'.

se não o levar ao arquivo, adicione o nome do arquivo aos urs. como isso:

   https://127.0.0.1:8887/fileName.txt

link para o servidor web para chrome: clique em mim