Three.js: Setting request headers for loaders

[jeanpul]

Hi, this is my first post so first I want to thank mrdoob and all the contributors for this fantastic library.

Description of the problem

I need to send specific headers with my TextureLoader request (XMLHttpRequest.setRequestHeader()) but I do not see any way to do that (I'm currently using r80).

Three.js version

• [ ] r80
• [ ] ...

Browser

• [x] All of them
• [ ] Chrome
• [ ] Firefox
• [ ] Internet Explorer

OS

• [x] All of them
• [ ] Windows
• [ ] Linux
• [ ] Android
• [ ] IOS

Hardware Requirements (graphics card, VR Device, ...)

[mrdoob]

Uhm... Interesting...

[takahirox]

Will we add setRequestHeader() method to FileLoader and other loaders?
I'm gonna try to make PR if this sounds good.

[takahirox]

Ah, I just realized now that
he wants setRequestHeader() for TextureLoader, not FileLoader.

The problem is that ImageLoader used by TextureLoader no longer uses FileLoader inside.
I mean there's no way to set header for image(texture) loader now...

One of the solutions is adding setRequestHeader() to FileLoader and
ImageLoader uses FileLoader (only if header is set),
but it'd complicate the design...

[mrdoob]

Will we add setRequestHeader() method to FileLoader and other loaders?

I guess that'll be some progress...

[takahirox]

Maybe adding setRequestHeader() to FileLoader and
handling texture loading with header request in user code is the easiest way so far,
like this

var texture = new Texture();
var image = document.createElementNS( 'http://www.w3.org/1999/xhtml', 'img' );
var loader = new FileLoader();
loader.setResponseType( 'blob' );
loader.setRequestHeader( { header: value } );
loader.load( url, function ( blob ) {

    image.src = URL.createObjectURL( blob );
    texture.image = image;
    texture.needsUpdate = true;

}, onProgress, onError );

(I haven't tried yet tho)

[jeanpul]

@takahirox, thanks for your solution but I do not want to avoid the use of TextureLoader.

I'm actually using r80 and I have overloaded
XHRLoader.prototype.load in order to use setRequestHeader. I've put the headers parameters
in the withCredentials property (I know that's not a long term solution) such as :

let loader = new TextureLoader();
loader.setWithCredentials({ withCredentials: true,
headers: [ { header: 'Auth', value: '****' } ]});

Maybe the solution is to add a new method setHeaders like the existing setCrossOrigins ?
We can add a headers property into the low level Loader class.
Maybe If you want, I can do this myself and do a pull request, however I'm completly familiar with the last release.

[takahirox]

As I wrote, ImageLoader called by TextureLoader no longer uses FileLoader and uses img.src = uri instead because of #10439.
That means there's no way to set headers for texture even if we add setRequestHeader() method to loaders now.
(Please see the latest revision, not r80)

I'd suggest that we add setRequestHeader() to FileLoader (I'm gonna make PR soon) and
you override ImageLoader.load() to use FileLoader in it by yourself on your environment so far
if you wanna keep using existing TextureLoader.
(Refer to e7f7d330b975b1e7d3b760a3b943976406bfa814 to revert)

[dbkaplun]

Part of the problem here is that loaders do two things: they parse data as well as perform requests. Ideally loaders should only parse data.

[donmccurdy]

10708 was merged, is there more to do here? Several loaders have a .parse() method that can be used if the developer wants to perform requests some other way.

[Mugen87]

Indeed, this one can be closed.

[dbkaplun]

Thanks, parse is exactly what I was looking for!