ローカルサーバーからイメージをロードするときに、「No-Access-Control-Allow-Origin 'ヘッダーが要求されたリソースに存在しますか？

Question

私はしかし、このエラーにイメージ結果をロードpixi.jsライブラリを使用して、私のローカル・ホスト・サーバーからの簡単なテスト画像をロードしようとしている：

Access to Image at 
'http://localhost:8080/local_files/assests/images/test_image.jpg' from origin 'null' 
has been blocked by CORS policy: No 'Access-Control-Allow-Origin' header is present 
on the requested resource. Origin 'null' is therefore not allowed access. 

私のコードイメージをロードする：

//load test image 
var texture = PIXI.Texture.fromImage("http://localhost:8080/local_files/assests/images/test_image.jpg"); 

Answer 1

許可元 - 一般に、あなたがいるドメインと同じドメインにあるリソースだけを読み込むことを許可されていることを意味します。したがって、 "localhost"リソースをロードする場合は、localhostにする必要があります。 しかし、この場合、問題はおそらく、ローカルリソースへのアクセス権を持たないリモートサーバからローカルホストリソースをロードしようとしているだけです。

リモートサーバーでイメージを使用することを忘れないでください。可能であれば、すべてのリソース（イメージ、jsファイルなど）に同じドメインを使用してください。静的リソースの場合、絶対パスの代わりに（http://localhost/images/image.pngの代わりに "./images/image.png"）リレーショナルパスを使用するのが最も簡単な方法です。

私は、これは

Answer 2

画像が別のドメインからロードされた場合に画像リソースはJavaScript（編集など）によって操作されたときに、Same Origin Policyが適用されるのに役立ちます願っています。

この場合、HTMLはローカルファイルシステム（原点はnull）からロードされますが、画像はhttp://localhost:8080からロードされます。したがって、pixi.jsを使用して画像を操作（画像データを読み込んでテクスチャとして保存）すると、http://localhost:8080はCORSをサポートしないため、ブラウザはエラーを報告します。この問題を解決するには

、2つの方法があります：http://localhost:8080上

1. 展開HTMLファイルと、そこからそれをロードするには。
2. CORSをhttp://localhost:8080で有効にします。