ImportMeshAsync with Headers

Questions
1

How can I import a mesh with ImportMeshAsync if I need to access the API using an API Key?
Normally you would use an “x-api-key” header along with “my_api_key” to access the api and download the requested file, but there is no option in BABYLONJS for including headers.

async function getModel(scene) {
  const result = await BABYLON.SceneLoader.ImportMeshAsync(
    "",
    "https://localhost:5000/download_mesh/Model.glb",
    "",
    scene
  );
  return result.meshes[0];
}
2

I believe you may use fetch API.
Then load asset from memory as here - Babylon.js docs

Very simple example


        fetch(url, {
            mode: 'cors',
            headers: {
                'x-api-key': '5485748746547e847483983343433243',
                'User-Agent': 'My-App',
                'Accept': '*/*',
            },
        }).then(response => {
            response.arrayBuffer().then(buffer => {
const assetBlob = new Blob([buffer]);
const assetUrl = URL.createObjectURL(assetBlob)
 -- Load model from assetUrl as you like
            })

Example - https://playground.babylonjs.com/#H9PYXY#11

1 Like
3

So I did what you suggested but nothing changes:

async function getModelHeaders(scene) {
  BABYLON.Tools.UseCustomRequestHeaders = true;
  fetch(BABYLON.Tools.GetAbsoluteUrl("https://my.ip:5000/download_model/Model.glb"), {
    mode: "no-cors",
    headers: {
      "x-api-key": "123456789",
    },
  }).then((response) => {
    response.arrayBuffer().then((buffer) => {
      const assetBlob = new Blob([buffer]);
      const assetUrl = URL.createObjectURL(assetBlob);
      BABYLON.appendSceneAsync(assetUrl, scene, {
        pluginExtension: ".glb",
      });
    });
  });
}

I think the problem is due to the lack of headers:

GET https://my.ip:5000/download_model/Model.glb net::ERR_ABORTED 403 (FORBIDDEN)
Uncaught (in promise) RuntimeError: Unable to load from blob:https://my.ip:8443/a22e01cc-4c03-4aa2-a130-8286f0280979: RangeError: Invalid typed array length: 20

Error 403 is the error that occurs when the API key is not sent, so the problem is that the headers are not working?

Can you help me with this?

Thanks for your help!

4

Did you try to fetch some simple file, not GLB, just .txt, for example?

How do you use this API to fetch a needed file just with the help of JS (without Babylon)?

5

It seems to be CORS problem, x-api-header may be incompatible with no-cors mode.

fetch("https://my.ip:5000/download/a.txt", {
    method: "GET",
    mode: "cors",
    headers: {
      "x-api-key": 123456789",
    },
  })
    .then((response) => {
      if (!response.ok) {
        throw new Error(`HTTP error! status: ${response.status}`);
      }
      return response.text();
    })
    .then((data) => {
      console.log("Content: ", data);
    })
    .catch((error) => {
      console.error("Error: ", error);
    });

Access to fetch at 'https://192.168.15.88:5000/download/a.txt' from origin 'https://my.ip:8443' has been blocked by CORS policy: Response to preflight request doesn't pass access control check: It does not have HTTP ok status.

I’ll be working on fixing the CORS issue and will let you know if I find any other issues with BABYLONJS.

1 Like