0

I am trying to implement a map using OpenLayers into an Angular application.

As a tile layer I wish to use Open Street Map.

When I run my app local it works like a charm, but when I install it on a server, the map does not get shown.

The following error comes:

Access to image at 'https://a.tile.openstreetmap.org/2/3/0.png' from origin 'https://my.testservices.com' has been blocked by CORS policy: No 'Access-Control-Allow-Origin' header is present on the requested resource.

After googling for a while, I found the advice to add crossOrigin setting 'null' to my tile layer:

gOnInit(): void {
    this.map = new Map({
        view: new View({
            center: [0, 0],
            zoom: 1,
        }),
        layers: [
            new TileLayer({
                source: new OSM({
                    crossOrigin: null
                }),
            })
        ],
        target: 'ol-map'
    });
}

True, that the header is not missing anymore but I got now the following error message:

Cross-Origin Read Blocking (CORB) blocked cross-origin response https://a.tile.openstreetmap.org/7/69/45.png with MIME type text/html. See https://www.chromestatus.com/feature/5629709824032768 for more details.

Any ideas how could I make it work?

Thanks a lot!

dorcsi
  • 295
  • 2
  • 6
  • 24
  • Try to set a unique `className` property for the TileLayer object and set crossOrigin to `anonymous`. (see [this post](https://stackoverflow.com/a/61871117/2963814)) – anste Aug 25 '21 at 11:41
  • The error messages seem to relate to using a Chrome browser extension https://stackoverflow.com/questions/55214828/how-to-stop-corb-from-blocking-requests-to-data-resources-that-respond-with-cors Have you tried with any other browser? – Mike Aug 25 '21 at 14:47

0 Answers0