Openlayers 6: Example Box Selection Error

Question

Following exactly the example of the openlayers site in:

https://openlayers.org/en/latest/examples/box-selection.html?q=feature

Locally, I have the following error:

Uncaught SyntaxError: Unexpected token <in JSON at position 0
    at JSON.parse (<anonymous>)
    at getObject (JSONFeature.js: 197)
    at GeoJSON.JSONFeature.readFeatures (JSONFeature.js: 53)
    at VectorSource. <anonymous> (featureloader.js: 94)

I believe the error occurs when trying to load a geojson file locally.

var vectorSource = new VectorSource ({
  url: 'data / geojson / countries.geojson',
  format: new GeoJSON ()
});

countries.geojson as it is quite extensive, I leave the link from where I downloaded the file: https://r68tk.csb.app/data/geojson/countries.geojson

How to solve?

Answer 1

I found the solution.

In the process of developing an application in Openlayers, unfortunately, there are problems when loading files locally (geojson, png etc.) due to the source desktop policy, i.e. CORS.

The problem:

An excellent text on the subject here.

To troubleshoot the issue, I used the Chrome extension called "moesif CORS Extension".

With it enabled, I was able to easily upload the file . geojson.

All right! Map data uploaded:

There are even more ways to stop CORS in your development environment at this address: https://medium.com/@dtkatz/3-Ways-to-fix-the-Cors-error-and-how-access-control- permitir -origin-Works-d97d55946d9

I hope to help someone with this information!