# ImportMeshAsync with Headers

**URL:** <https://forum.babylonjs.com/t/importmeshasync-with-headers/54540>\
**Category:** Questions\
**Created:** [November 4, 2024, 12:26pm UTC](https://forum.babylonjs.com/t/importmeshasync-with-headers/54540 "2024-11-04T12:26:45Z")\
**Posts on this page:** 5\
**Page:** 1

<div class="post-metadata">

**Author:** ![Juan\_Lopez\_Espinosa](https://sea2.discourse-cdn.com/flex024/user_avatar/forum.babylonjs.com/juan_lopez_espinosa/32/33985_2.png) [@Juan\_Lopez\_Espinosa](https://forum.babylonjs.com/u/Juan_Lopez_Espinosa)\
**Post date:** [November 4, 2024, 12:26pm UTC](https://forum.babylonjs.com/t/importmeshasync-with-headers/54540/1 "2024-11-04T12:26:45Z")

</div>

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.

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

```

---

<div class="post-metadata">

**Author:** ![labris](https://sea2.discourse-cdn.com/flex024/user_avatar/forum.babylonjs.com/labris/32/12576_2.png) [@labris](https://forum.babylonjs.com/u/labris)\
**Post date:** [November 4, 2024, 1:14pm UTC](https://forum.babylonjs.com/t/importmeshasync-with-headers/54540/2 "2024-11-04T13:14:48Z")

</div>

I believe you may use fetch API.  
Then load asset from memory as here - [Babylon.js docs](https://doc.babylonjs.com/features/featuresDeepDive/importers/loadFromMemory)

Very simple example

```auto

        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](https://playground.babylonjs.com/#H9PYXY#11)

---

<div class="post-metadata">

**Author:** ![Juan\_Lopez\_Espinosa](https://sea2.discourse-cdn.com/flex024/user_avatar/forum.babylonjs.com/juan_lopez_espinosa/32/33985_2.png) [@Juan\_Lopez\_Espinosa](https://forum.babylonjs.com/u/Juan_Lopez_Espinosa)\
**Post date:** [November 8, 2024, 8:16am UTC](https://forum.babylonjs.com/t/importmeshasync-with-headers/54540/3 "2024-11-08T08:16:05Z")

</div>

So I did what you suggested but nothing changes:

```auto
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:

```auto
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!

---

<div class="post-metadata">

**Author:** ![labris](https://sea2.discourse-cdn.com/flex024/user_avatar/forum.babylonjs.com/labris/32/12576_2.png) [@labris](https://forum.babylonjs.com/u/labris)\
**Post date:** [November 8, 2024, 9:48am UTC](https://forum.babylonjs.com/t/importmeshasync-with-headers/54540/4 "2024-11-08T09:48:34Z")

</div>

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

> [@Juan\_Lopez\_Espinosa](#):
>
> Normally you would use an “x-api-key” header along with “my\_api\_key” to access the api and download the requested file

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

---

<div class="post-metadata">

**Author:** ![Juan\_Lopez\_Espinosa](https://sea2.discourse-cdn.com/flex024/user_avatar/forum.babylonjs.com/juan_lopez_espinosa/32/33985_2.png) [@Juan\_Lopez\_Espinosa](https://forum.babylonjs.com/u/Juan_Lopez_Espinosa)\
**Post date:** [November 8, 2024, 12:52pm UTC](https://forum.babylonjs.com/t/importmeshasync-with-headers/54540/5 "2024-11-08T12:52:34Z")

</div>

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

```auto
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.