Origin nullはAccess-Control-Allow-Originでは許可されていません

以下のコードを使用して、weather.xslというhtml出力を作成するための小さなxsltファイルを作成しました。

<!-- DWXMLSource="http://weather.yahooapis.com/forecastrss?w=38325&u=c" -->
<xsl:stylesheet version="1.0"
xmlns:xsl="http://www.w3.org/1999/XSL/Transform"
exclude-result-prefixes="yweather"
xmlns:yweather="http://xml.weather.yahoo.com/ns/rss/1.0" xmlns:geo="http://www.w3.org/2003/01/geo/wgs84_pos#">
<xsl:output omit-xml-declaration="yes" indent="yes"/>
<xsl:strip-space elements="*"/>

<xsl:template match="/">
    <img src="{/*/*/item/yweather:condition/@text}.jpg"/>
</xsl:template>
</xsl:stylesheet>

次のように、jQueryを使用して実行しようとしているhtmlファイルのdivにhtml出力をロードしたいと思います。

<div id="result">
<script type="text/javascript">
$('#result').load('weather.xsl');
</script>
</div>

しかし、次のエラーが発生します。OriginnullはAccess-Control-Allow-Originでは許可されていません。

私はxsltにヘッダーを追加することについて読みましたが、それを行う方法がわからないので、助けがあれば幸いです。html出力にこの方法でロードできない場合は、他の方法に関するアドバイスをそれをするのは素晴らしいことです。

Origin nullはローカルファイルシステムであるためload、file:///URL を介して呼び出しを行うHTMLページをロードしていることを示しています（たとえば、ローカルファイルブラウザーなどでダブルクリックするだけです）。ブラウザが異なれば、ローカルファイルに同じ生成元ポリシーを適用するためのアプローチも異なります。

私の推測では、これはChromeを使用して表示されています。SOPをローカルファイルに適用するためのChromeのルールは非常に厳しく、ドキュメントと同じディレクトリからファイルをロードすることもできません。Operaもそうです。Firefoxなどの他のブラウザでは、ローカルファイルへのアクセスが制限されています。しかし、基本的に、ローカルリソースでajaxを使用しても、クロスブラウザでは機能しません。

ローカルファイルを使用するのではなく、実際にWebに展開するものをローカルでテストするだけの場合は、http://代わりに単純なWebサーバーをインストールして、URL 経由でテストします。これにより、より正確なセキュリティ状況を把握できます。

ChromeとSafariでは、ローカルリソースでのajaxの使用に制限があります。そのため、次のようなエラーがスローされます

Access-Control-Allow-OriginではOrigin nullは許可されていません。

解決策： Firefoxを使用するか、データを一時サーバーにアップロードします。それでもChromeを使用したい場合は、以下のオプションから開始してください。

--allow-file-access-from-files

上記のパラメーターをChromeに追加する方法の詳細：タスクバーのChromeアイコンを右クリックし、ポップアップウィンドウでGoogle Chromeを右クリックして[プロパティ]をクリックし、[ショートカット]タブの[ターゲット]テキストボックス内に上記のパラメーターを追加します。以下のようになります。

C:\Users\XXX_USER\AppData\Local\Google\Chrome\Application\chrome.exe --allow-file-access-from-files

これが役立つことを願っています！

「ウェブサーバーを実行する」という答えは非常に困難に思えますが、システムにpythonがある場合（少なくともMacOSとLinuxディストリビューションにデフォルトでインストールされている場合）、次のように簡単です。

python -m http.server  # with python3

または

python -m SimpleHTTPServer  # with python2

したがってmyfile.html、フォルダーにhtmlファイルがある場合、たとえばmydir、次の操作を行うだけです。

cd /path/to/mydir
python -m http.server  # or the python2 alternative above

次に、ブラウザで次のように指定します。

http://localhost:8000/myfile.html

これで完了です。Webセキュリティを無効にしたり、ローカルファイルを許可したり、コマンドラインオプションでブラウザを再起動したりすることなく、すべてのブラウザで動作します。

私はこのSOソースhttps://stackoverflow.com/a/14671362/1743693に従って謙虚にそれを追加したいと思います。この種の問題は、次のjQuery命令を使用するだけで部分的に解決されました。

<script> 
    $.support.cors = true;
</script>

IE10.0.9200で試したところ、すぐに動作しました（jquery-1.9.0.jsを使用）。

Chrome 28.0.1500.95の場合-この命令は機能しません（これはdavidとして発生します）が上記のリンクのコメントで不平を言っているため、）

--allow-file-access-from-filesを指定してchromeを実行しても機能しません（上記のMaistoraの主張）

Gokhanのソリューションを使用するためのビットを追加する：

--allow-file-access-from-files

次に、上記のテキストをターゲットテキストに追加し、その後にスペースを1つ追加するだけです。上記のプロパティを追加した後は、必ずChromeブラウザのすべてのインスタンスを閉じてください。このプロパティを追加したアイコンでChromeを再起動します。それはすべてのために働くはずです。

ローカルのhtmlファイルからサーバーにXHRリクエストを送信するソリューションを探していて、ChromeとPHPを使用するソリューションを見つけました。（jqueryなし）

JavaScript：

var x = new XMLHttpRequest(); 
if(x) x.onreadystatechange=function(){ 
    if (x.readyState === 4 && x.status===200){
        console.log(x.responseText); //Success
    }else{ 
        console.log(x); //Failed
    }
};
x.open(GET, 'http://example.com/', true);
x.withCredentials = true;
x.send();

Chromeのリクエストヘッダー Origin: null

私のPHP応答ヘッダー（「null」は文字列であることに注意してください）。HTTP_REFERERは、リモートサーバーから別のサーバーへのクロスオリジンを許可します。

header('Access-Control-Allow-Origin: '.(trim($_SERVER['HTTP_REFERER'],'/')?:'null'),true);
header('Access-Control-Allow-Credentials:true',true);

サーバーに正常に接続できました。Credentialsヘッダーは無視できますが、ApacheがAuthType Basic有効になっている場合はこれでうまくいきます

私はFFとOperaとの互換性をテストしました。以下のような多くの場合に機能します。

VM LAN IP（192.168.0.x）からVMのWAN（パブリック）
IPに戻るIP：port VM LAN IPからリモートサーバーのドメイン名に戻る。
ローカルの.HTMLファイルからVM LAN IPおよび/またはVM WAN IP：portへ
、ローカルの.HTMLファイルからリモートサーバードメイン名へ。
等々。

file:/ソースタグを使用して、ローカルJavascriptファイルを（ソースページの下のツリーに）読み込むことができます。

<script src="my_data.js"></script>

この場合のように、入力をJavaScriptにエンコードすると、次のようになります。

mydata.js：

$xsl_text = "<xsl:stylesheet version="1.0" + ....

（これはjsonの方が簡単です）次に、Javascriptグローバル変数に「データ」を入れて、必要に応じて使用します。