CesiumJS page working in Firefox, not working in Chrome and Edge

CesiumJS
1

Hi,

I thought CesiumJS was supported in all browsers. My script is not displaying my 3D tiles in Chrome and Edge. Firefox is working …

Below is my script. I don’t mind if you use my key, this is just for testing purposes


<!DOCTYPE html>
<html lang="en">

<head>
	<meta charset="UTF-8" />
	<meta name="viewport" content="width=device-width, initial-scale=1.0" />
	<title>Cesium 3D Tileset Example</title>
	<!-- Include CesiumJS CSS -->
	<link href="https://cesium.com/downloads/cesiumjs/releases/1.122/Build/Cesium/Widgets/widgets.css"
		rel="stylesheet" />
	<style>
		html,
		body,
		#cesiumContainer {
			margin: 0;
			padding: 0;
			width: 100%;
			height: 100%;
			overflow: hidden;
		}
	</style>
	<script src="https://cesium.com/downloads/cesiumjs/releases/1.122/Build/Cesium/Cesium.js"></script>
</head>

<body>
	<div id="cesiumContainer" class="fullSize"></div>

	<script>
		window.onload = async function () {
			// Set Cesium Ion access token
			Cesium.Ion.defaultAccessToken = "eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJqdGkiOiIwYTQ1Mjk0NS1lMzEzLTRiYjAtOWFjMy1kYjJhOGY5NWIwN2YiLCJpZCI6MjU4NDcyLCJpYXQiOjE3MzI3MjI3NTF9.ZuMJ8s0g_VRkZWv93b7euBp5KdJ2039nlughzgayW2w";

			// Initialize the viewer
			const viewer = new Cesium.Viewer("cesiumContainer");

			// Load the tileset
			try {
				console.log("Loading tileset...");
				const tileset = await Cesium.Cesium3DTileset.fromIonAssetId(2874821);
				viewer.scene.primitives.add(tileset);
				console.log("Tileset loaded:", tileset);

				// Zoom to the tileset
				await viewer.zoomTo(tileset);
			} catch (error) {
				console.error("Error loading tileset:", error);
			}
		};
	</script>
</body>

</html>

Maybe I am doing something wrong. Please let me know.

Best from
BVS

2

When you look at the developer console (shown after hitting F12), then you’ll see the message

“Refused to cross-origin redirects of the top-level worker script.”

There are several resources that provide more details here, e.g. javascript - CORS request blocked in locally opened html file - Stack Overflow

Usually, you’ll start a local webserver to host your application. The basic steps:

  • At the command line, run
    npm install http-server -g.
    This will install the ‘http-server’ app from https://github.com/http-party/http-server globally
  • In the directory that contains your application, run
    http-server -a localhost -p 8003
    This will start the server, under the address localhost, using port 8003.
  • You can then accces your application under
    https://localhost:8003/index.html
1 Like