Adding custom headers (eg. Auth) to requests

As of 5.1 XML3D provides a way to intercept and modify requests for external resources before they're sent out. This can be used to add your own HTTP headers to requests, such as the Authentication header if some or all of your external assets require authentication. In this short example we'll create an onRequest handler that adds an Authorization header to some URLs.

We'll begin by registering our handler with XML3D:

XML3D.resource.onRequest(function(uri, opt) {
   // TODO
});

We can register as many handlers as we want. For every outgoing request XML3D will call each registered handler, it's up to the handler to decide if the request is relevant or not. For each request the handler is given the request URI as an XML3D.resource.URI object and an opt object containing the following fields:

var opt = {
  headers : {},  // Add custom HTTP headers here
  priority : 0,  // All requests are priority 0 by default, higher priorities will be requested before lower ones
  abort : false,  // true will cause this request to be aborted and a RequestAbortedException will be logged to the console
  allowCaching : true // false will disable XML3D's internal document caching for this request, useful for dynamic urls
}

Changes to this opt object will be considered when the internal Request object is later created.

Lets get back to our handler. First we'll need to inspect the URI to see if this request should include an Authorization header, we'll assume all our protected assets are kept in a special /protected/ folder on our web server:

XML3D.resource.onRequest(function(uri, opt) {
   if (uri.path.match(/\/protected\//)) {
      // TODO
   }
});

Using regex we look for the /protected/ substring in the URL and then add the Authorization header. Lets also assume we want to set the priority of these assets higher than the rest to ensure they're loaded first:

XML3D.resource.onRequest(function(uri, opt) {
   if (uri.path.match(/\/protected\//)) {
      opt.headers["Authorization"] = "Basic QWxhZGRpbjpvcGVuIHNlc2FtZQ==";
      opt.priority = 1;
   }
});

To test our handler we could start a request through the XML3D.resource.fetch function:

XML3D.resource.fetch("localhost:80/protected/testAsset.xml").then(function(response) {
   console.log(response);
});

NOTE: The resource system of XML3D is tied to the requestAnimationFrame function, meaning requests will only be processed if animation frames are being processed by the browser. If the tab with your XML3D scene is currently inactive for example you won't see any response until it becomes active again. Keep this in mind when using the Javascript Debugger to call these functions directly!