How can I set headers on an outgoing THREE.TextureLoader request?

Question

I want my TextureLoader to use header authorization to load textures:

let loader = new THREE.TextureLoader();
loader.headers = { . . . };                    // I want this!
let myTex = loader.load('my_authorized_url');

I want to pass custom headers into the request sent over the wire. I see the Loader#setWithCredentials() function, but I can't tell how it's used (or if that's even what I should use). Should I consider writing my own Loader?

EDIT: It looks to me like there's nowhere in the ImageLoader source where a header could be set.

Answer 1

Even though this issue is old, I'll post my workaround for this problem, maybe someone find it useful:

const loader = new THREE.FileLoader();
loader.crossOrigin = '';
loader.mimeType = 'image/png';
loader.responseType = 'blob';
loader.requestHeader = { Authorization: 'YOUR TOKEN' };
loader.load(
  YOUR_PRIVATE_URL,
  (response) => {
    const image = new Image();
    const blobUrl = URL.createObjectURL(response);
    image.onload = function () {
      var texture = new THREE.Texture(image);
      this.setState({
        originalWidth: texture.image.width,
        originalHeight: texture.image.height,
        imageLoaded: true,
        texture,
      });
    }.bind(this);
    image.src = blobUrl;
  },
  (xhr) => {
    console.log(`${xhr.loaded / xhr.total * 100}% loaded`);
  },
  (xhr) => {
    console.log('Error happened', xhr);
  },
);

Basically, what I did was load the resource as a common file and then turn it as an image.

Answer 2

I eventually settled on editing the prototype method on the Loader:

Object.assign(THREE.XHRLoader.prototype, {
    load: function(a, b, c, d) {
        void 0 !== this.path && (a = this.path + a);
        var e = this
        , f = THREE.Cache.get(a);
        if (void 0 !== f)
        return e.manager.itemStart(a),
        setTimeout(function() {
            b && b(f);
            e.manager.itemEnd(a)
        }, 0),
        f;
        var g = new XMLHttpRequest;
        g.overrideMimeType("text/plain");
        g.open("GET", a, !0);
        //
        // .............. 
        // NOTE THIS LINE:
        //
        g.setRequestHeader('HEADER_KEY', 'HEADER_VALUE');
        g.addEventListener("load", function(c) {
            var f = c.target.response;
            THREE.Cache.add(a, f);
            200 === this.status ? (b && b(f),
            e.manager.itemEnd(a)) : 0 === this.status ? (console.warn("THREE.XHRLoader: HTTP Status 0 received."),
            b && b(f),
            e.manager.itemEnd(a)) : (d && d(c),
            e.manager.itemError(a))
        }, !1);
        void 0 !== c && g.addEventListener("progress", function(a) {
            c(a)
        }, !1);
        g.addEventListener("error", function(b) {
            d && d(b);
            e.manager.itemError(a)
        }, !1);
        void 0 !== this.responseType && (g.responseType = this.responseType);
        void 0 !== this.withCredentials && (g.withCredentials = this.withCredentials);
        g.send(null);
        e.manager.itemStart(a);
        return g
    },
    ...
});