web-dev-qa-db-ja.com

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>

しかし、私は次のエラーを得ています：Origin nullはAccess-Control-Allow-Originで許可されていません。

Xsltにヘッダを追加することについて読んだことがありますが、その方法がわからないので、何か助けになれば幸いです。HTML出力へのロードがこのようにできない場合は、それ以外の方法についてアドバイスしてください。それをすることは素晴らしいことです。

jqueryhtmlcors
172
dudledok

Originのnullはローカルファイルシステムであるため、file:/// URLを介してloadを呼び出すHTMLページをロードしていることをお勧めします（たとえば、ローカルファイルブラウザでダブルクリックするなど）。ローカルファイルに Same Origin Policy を適用するには、ブラウザによってアプローチが異なります。

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

ローカルファイルを使用するのではなく、実際にWebにデプロイするものをローカルでテストするだけの場合は、代わりに単純なWebサーバーをインストールし、代わりにhttp://のURLを使用してテストします。それはあなたにはるかに正確なセキュリティの像を与えます。

215
T.J. Crowder

ChromeとSafariには、ローカルリソースでのAjaxの使用に制限があります。こういうわけでそれはのようなエラーを投げます

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

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

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

212
Gokhan Tank

「run a webserver」という答えは非常に面倒なように思われるかもしれませんが、システムにpythonがインストールされていれば（少なくともデフォルトではMacOSおよびLinuxディストリビューションにインストールされている）

python -m http.server  # with python3

または

python -m SimpleHTTPServer  # with python2

あなたのhtmlファイルmyfile.htmlがフォルダ内にある場合、例えばmydirとすれば、あなたがしなければならないのは、ただ：

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

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

http://localhost:8000/myfile.html

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

40
gozzilli

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

--allow-file-access-from-files

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

2
saurabh

私はこのSOソースに従ってそれを謙虚に加えたいと思います： https://stackoverflow.com/a/14671362/174369 、この種の問題は今部分的に次のjQuery命令を使用することで簡単に解決できます。

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

私はIE10.0.9200でそれを試しました、そしてそれはすぐに働きました（jquery-1.9.0.jsを使って）。

クロム28.0.1500.95 - この命令は上手くいきません（これは david が上記のリンク先のコメントに不平を言うので至るところで起こります）

--allow-file-access-from-filesを指定してchromeを実行してもうまくいきませんでした（上記のMaistoraの主張どおり）

2
orberkov