web-dev-qa-db-ja.com

Origin 'null'からの画像へのアクセスはCORSポリシーによってブロックされました

OpenLayers 3にJavaScriptアプリケーションがあり、ベースレイヤーはローカルタイルから作成されます。私は自分のコンピューターでのみ働いているので、なぜCORSエラーがあるのか​​わかりません。

    var newLayer = new ol.layer.Tile({
    source: new ol.source.OSM({
        url: 'E:/Maperitive/Tiles/vychod/{z}/{x}/{y}.png'
    })
});
var schladming = [21.6187, 48.7327]; // longitude first, then latitude
// since we are using OSM, we have to transform the coordinates...
var schladmingWebMercator = ol.proj.fromLonLat(schladming);

var map = new ol.Map({
    layers: [
        newLayer
    ],
    controls: [],
    target: 'mapid',
    view: new ol.View({
        center: schladmingWebMercator,
        zoom: 10,
        minZoom: 10,
        maxZoom: 14
    })
});

コンソールからのエラーメッセージ：

Origin nullからのfile:///E:/Maperitive/Tiles/vychod/10/573/352.pngの画像へのアクセスがCORSポリシーによってブロックされました：無効な応答。したがって、Origin nullはアクセスを許可されていません。

画像URLをダブルクリックすると、画像が開きます。何が間違っているのでしょうか？私は前にそのエラーが一度もなかった。

javascriptcorslocalopenlayers-3
43
Denis Stephanov

CORSエラーが発生しています。

ローカルファイルシステムを使用してファイルにアクセスしようとしても、うまくいきません。

Originは、ローカルファイルシステムであるため、nullです。このpngファイルをHost可能性はありますか？

提案：

代わりに、これらのファイルをAWS S3バケットにホストします。その後、httpプロトコルではなく、fileプロトコルを使用できます。 ORローカルシステムにhttpサーバーをセットアップし、httpをlocalhostに使用して、すべてをローカルに保ちたい場合にファイルを提供します。

もっと読む：

CORSの仕組み

22
Jeremy Iglehart

カバーの下には、何らかの形式のURLロードリクエストがあります。このメソッドを介してローカルファイルシステムから画像やその他のコンテンツを読み込むことはできません。

画像はWebサーバー経由でロードする必要があるため、適切なhttp URL経由でアクセスします。

8
Kit

この問題は、OpenLayers OSMソースにcrossOrigin：nullを提供することで実際に解決されました。

var newLayer = new ol.layer.Tile({
source: new ol.source.OSM({
    url: 'E:/Maperitive/Tiles/vychod/{z}/{x}/{y}.png',
    crossOrigin: null
    })
});
7
Sadjad Esfandiari

これに対する解決策は、コードを提供し、サーバー上で実行させることです。chromeのWebサーバーを使用して、ページを簡単に提供できます。

3
Damien Doumer

この場合、CORS問題はOpenLayersで間違ったソースコンストラクターを使用したことが原因です。 ol.source.OSMは、WebからデフォルトのOpenStreetMapタイルにアクセスするためのものであり、そのため、デフォルトではcrossOrigin： 'anonymous'に設定されています。ローカルソースURLを使用している場合、crossOrigin設定をデフォルトにしない汎用ol.source.XYZコンストラクターを使用する必要があります（これが、上記のcrossOrigin：nullの設定が機能する理由です）。また、たとえばモバイルデバイスのSDカードなど、マップにファイルプロトコルを使用することは完全に合法です。

2
Mike

私はまったく同じ問題を抱えていました。私の場合、上記の解決策のいずれも機能しませんでしたが、私にとってそれは次を追加することでした：

app.UseCors(builder => builder
.AllowAnyOrigin()
.AllowAnyMethod()
.AllowAnyHeader()

基本的に、すべてを許可。

これは安全にローカルで実行している場合にのみ安全であることに注意してください。

0
Hugo Nava Kopp

CORSをバイパスしてみてください：

Chromeの場合：ショートカットを編集するか、cmdを使用：C：\ Chrome.exe --disable-web-security

Firefoxの場合：Firefoxを開き、URLバーにabout：configと入力します。検索：security.fileuri.strict_Origin_policyをfalseに設定

0
S. R.