I am trying to build a small sandbox CesiumJS app for pedagogic purposes.
For that, I need to query some small glTF assets (2 small flat squares build from 4 simple triangles) available at an existing API GET endpoint, e.g: https://my-server.org/api/v2/data/collection/8/gltf/item.gltf. Then I would like to naturally display them within my Cesium app.
From this simple but yet fully functional answer: https://stackoverflow.com/a/71088611/6630397 I am able to fetch a JSON response from the API.
But when passing the full URL of a glTF asset, using for example the fetchBlob() function, it says:
Cross-Origin Request Blocked: The Same Origin Policy disallows reading the remote resource at https://my-server.org/api/v2/data/collection/8/gltf/item.gltf. (Reason: CORS header ‘Access-Control-Allow-Origin’ missing). Status code: 200.
Please note that if I click that link in my browser console, it successfully opens a pop-up for actually downloading the glTF file.
So, is it possible to make the same append automatically within my client application so that the glTF file is directly loaded in the Cesium globe? (if absolutely needed, a temporary storage in a local folder on the disk is OK)
Here is the documentation pages on which I rely so far: https://cesium.com/learn/cesiumjs/ref-doc/Resource.html but I cannot find and way to fetch a glTF object from a URL.
Maybe there is something to do with the native Fetch API? But my first attempt is not successful either, e.g.:
glTFFileURL = "https://my-server.org/api/v2/data/collection/8/gltf/item.gltf";
let glTFPromise = fetch(glTFFileURL);
console.log("glTFPromise:",glTFPromise);
glTFPromise.then((res) => {
console.log(res);
}).otherwise(err => {
console.log(err);
});
which returns all this stack trace:
glTFPromise: // <- this is the console.log() output
Promise { <state>: "pending"
<state>: "rejected
<reason>: TypeError: NetworkError when attempting to fetch resource.
columnNumber: 0
fileName: ""
lineNumber: 0
message: "NetworkError when attempting to fetch resource."
stack: ""
(...)
(!) Uncaught (in promise) TypeError: glTFPromise.then(...).otherwise is not a function
(...reference to the .otherwise() of the above code)
(!) Cross-Origin Request Blocked: The Same Origin Policy disallows reading the remote
resource at https://my-server.org/api/v2/data/collection/8/gltf/item.gltf.
(Reason: CORS header ‘Access-Control-Allow-Origin’ missing). Status code: 200.
(!) Uncaught (in promise) TypeError: NetworkError when attempting to fetch resource.
Doesn't the server.cjs already allows all the necessary for this to work out of the box: https://github.com/CesiumGS/cesium/blob/6f4c4cc7019aad071086effd575a146b76523e3c/server.cjs#L69-L76 ?
CORS error ref: https://developer.mozilla.org/en-US/docs/Web/HTTP/CORS/Errors/CORSMissingAllowOrigin
