Hi!
I'm getting this errors message:
Access-Control-Allow-Origin cannot contain more than one origin.
Fetch API cannot load http://mymapservername/protomaps.pmtiles due to access control checks.
Failed to load resource: Access-Control-Allow-Origin cannot contain more than one origin.
Unhandled Promise Rejection: TypeError: Load failed
This is /etc/nginx/sites-available/default configuration :
server {
listen 80 default_server;
listen [::]:80 default_server;
server_name myservername;
# SSL configuration
#
# listen 443 ssl default_server;
# listen [::]:443 ssl default_server;
#
# Note: You should disable gzip for SSL traffic.
# See: https://bugs.debian.org/773332
#
# Read up on ssl_ciphers to ensure a secure configuration.
# See: https://bugs.debian.org/765782
#
# Self signed certs generated by the ssl-cert package
# Don't use them in a production server!
#
# include snippets/snakeoil.conf;
#root /var/www/html;
root /srv/myworldmap/html;
# Add index.php to the list if you are using PHP
#index index.html index.htm index.nginx-debian.html;
index index.html;
#server_name _;
location / {
# First attempt to serve request as file, then
# as directory, then fall back to displaying a 404.
try_files $uri $uri/ =404;
}
# pass PHP scripts to FastCGI server
#
#location ~ \.php$ {
# include snippets/fastcgi-php.conf;
#
# # With php-fpm (or other unix sockets):
# fastcgi_pass unix:/run/php/php7.4-fpm.sock;
# # With php-cgi (or other tcp sockets):
# fastcgi_pass 127.0.0.1:9000;
#}
# deny access to .htaccess files, if Apache's document root
# concurs with nginx's one
#
#location ~ /\.ht {
# deny all;
#}
add_header "Access-Control-Allow-Origin" "*" always;
}
This is the content of /srv/myworldmap/html folder :
root@vmi1102187:~# ls -lah /srv/myworldmap/html/
total 115G
drwxr-xr-x 3 root root 4.0K Aug 30 16:37 .
drwxr-xr-x 3 root root 4.0K Aug 27 18:54 ..
-rw-r--r-- 1 root root 1.5K Aug 27 23:09 index.html
drwxr-xr-x 5 root root 4.0K Aug 27 23:03 node_modules
-rw-r--r-- 1 root root 1.5K Aug 27 23:03 package-lock.json
-rw-r--r-- 1 root root 52 Aug 27 23:03 package.json
-rw-r--r-- 1 root root 115G Aug 28 01:11 protomaps.pmtiles
-rw-r--r-- 1 root root 82K Aug 27 19:30 style.json
/srv/myworldmap/html/index.html :
<html>
<head>
<title>PMTiles MapLibre Example</title>
<meta charset="utf-8"/>
<link rel="stylesheet" href="https://unpkg.com/maplibre-gl@4.5.0/dist/maplibre-gl.css" crossorigin="anonymous">
<script src="https://unpkg.com/maplibre-gl@4.5.0/dist/maplibre-gl.js" crossorigin="anonymous"></script>
<script src="https://unpkg.com/pmtiles@3.0.6/dist/pmtiles.js"></script>
<style>
body {
margin: 0;
}
#map {
height:100%; width:100%;
}
</style>
</head>
<body>
<div id="map"></div>
<script type="text/javascript">
// add the PMTiles plugin to the maplibregl global.
let protocol = new pmtiles.Protocol();
maplibregl.addProtocol("pmtiles", protocol.tile);
let PMTILES_URL = "protomaps.pmtiles";
const p = new pmtiles.PMTiles(PMTILES_URL);
// this is so we share one instance across the JS code and the map renderer
protocol.add(p);
// we first fetch the header so we can get the center lon, lat of the map.
p.getHeader().then(h => {
const map = new maplibregl.Map({
container: 'map',
zoom: h.maxZoom-13,
center: [h.centerLon, h.centerLat],
style: 'style.json'
});
})
</script>
</body>
</html>
How to make these errors message:
Access-Control-Allow-Origin cannot contain more than one origin.
Fetch API cannot load http://mymapserveraddress/protomaps.pmtiles due to access control checks.
Failed to load resource: Access-Control-Allow-Origin cannot contain more than one origin.
Unhandled Promise Rejection: TypeError: Load failed
disappear and make the map visible?
Raphy
