web-dev-qa-db-ja.com

XMLHttpRequest Originのnullはfile：///からfile：///へのAccess-Control-Allow-Originを許可されていません（サーバーレス）

私はインデックスファイルを起動することによってダウンロードしてローカルで実行できるWebサイトを作成しようとしています。

すべてのファイルはローカルにあり、リソースはオンラインで使用されていません。

JQuery用のAJAXSLTプラグインを使用して（サブディレクトリ内の）XSLテンプレートを含むXMLファイルを処理しようとすると、次のようなエラーメッセージが表示されます。

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.

要求を出しているインデックスファイルはfile:///C:/path/to/XSL%20Website/index.htmlですが、使用されているJavaScriptファイルはfile:///C:/path/to/XSL%20Website/assets/js/に格納されています。

どうすればこの問題を解決できますか？

jqueryxmlxsltcorsxmlhttprequest
206
Kevin Herrera

ローカルウェブサーバーを実行することが選択肢ではない場合は、ブラウザスイッチを介してChromeからfile://ファイルへのアクセスを許可することができます。少し掘った後、私は この議論 を発見しました。これは冒頭の投稿でブラウザの切り替えについて言及しています。次のようにしてChromeインスタンスを実行します。

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

これは開発環境には受け入れられるかもしれませんが、それ以外はほとんどありません。常にこれを望んでいるわけではありません。これはまだ未解決の問題のようです（2011年1月現在）。

下記も参照してください。 Chromeでローカルファイルを使用するjQuery getJSONの問題

174
Courtney Christensen

これに対処するための基本的に唯一の方法は、Webサーバーをlocalhost上で実行し、そこからサービスを提供することです。

Ajaxリクエストがあなたのコンピュータ上の任意のファイルにアクセスすることをブラウザが許可するのは安全ではありません。そのため、ほとんどのブラウザは "file：//"リクエストを " "の目的でOriginを持たないものとして扱います同一オリジンポリシー 」

Webサーバを起動することは、ファイルが存在し実行中のディレクトリにcdingすることと同じくらい簡単です。

python -m SimpleHTTPServer
86
Singletoned

このソリューションはjQuery.getScript（）を使ってローカルスクリプトをロードすることを可能にします。これはグローバル設定ですが、要求ごとにcrossDomainオプションを設定することもできます。

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

OSX/Chromeの開発者向けに、--allow-file-access-from-filesスイッチをオンにしてChromeを起動するAppleScriptを次に示します。

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 &"
4
ericsoco

ローカルファイルを開くための javascript FileReader 関数の使い方はどうでしょうか。

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

今Choose fileボタンをクリックしてファイルfile:///C:/path/to/XSL%20Website/data/home.xmlを参照してください。

4
suhailvs

この制限を回避するために、chromeを次のように起動します。open -a "/Applications/Google Chrome.app/Contents/MacOS/Google Chrome" --args --allow-file-access-from-files。

Josh Leeのコメント から派生したものですが、Google Chromeが自分のWindowsパーティションから開かないようにするために、Google Chromeへのフルパスを指定する必要があります（Parallelsで）。

3
Stunner

これを回避したばかりの方法は、XMLHTTPRequestをまったく使用しないことです。代わりに、必要なデータを別のJavaScriptファイルに含めます。 （私の場合は、 https://github.com/kripken/sql.js/ を使用するにはバイナリのSQLite BLOBが必要でした。）

私はbase64_data.jsというファイルを作成しました（そして、btoa()を使用して必要なデータを変換し、<div>に挿入してコピーできるようにしました）。

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

そして、通常のjavascriptのようにデータをHTMLに含めます。

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

JSON、おそらくXMLさえ読むためにこれを修正するのは簡単なことだろうと思います。私はそれを読者のための練習として残します;）

1
Anthony Briggs

'Access-Control-Allow-Origin':'*'をresponse.writeHead(, {[here]})に入れてみることができます。

1
Shikon

「chromeアプリ用のWebサーバー」を使用します。 （PCで実際に持っているかどうかは、知っているかどうかに関係なく、Cortanaで検索するだけです！）。それを開き、「ファイルを選択」をクリックして、ファイルを含むフォルダーを選択します。 実際にファイルを選択しないでください。ファイルフォルダーを選択し、[フォルダーの選択]ボタンの下にあるリンクをクリックします。

ファイルが表示されない場合は、ファイル名をursに追加します。このような：

   https://127.0.0.1:8887/fileName.txt

クロムのWebサーバーへのリンク： クリックしてください

0
person the human