diff --git a/README.md b/README.md index e162357..e807069 100644 --- a/README.md +++ b/README.md @@ -341,6 +341,23 @@ Supported values: `get`, `post`, `put`, `patch`, `delete`, `sse`. These headers allow the server to detect µJS requests and adapt its response (e.g. return a fragment instead of a full page, skip analytics, return lighter content on prefetch). +### Custom headers + +You can send additional HTTP headers with every request by setting the `headers` option in the configuration: + +```javascript +mu.init({ + headers: { + "Authorization": "Bearer " + myToken, + "Accept-Language": "fr-FR" + } +}); +``` + +These headers are merged into both regular and prefetch requests. µJS's internal headers (`X-Requested-With`, `X-Mu-Mode`, `X-Mu-Method`, `X-Mu-Prefetch`) always take precedence and cannot be overridden through this option. + +For per-request or dynamic headers (e.g. a fresh CSRF token on each request), listen to the `mu:before-fetch` event and modify `event.detail.config` instead. + ## Triggers diff --git a/lib/mu.js b/lib/mu.js index 46fd882..794f6b3 100644 --- a/lib/mu.js +++ b/lib/mu.js @@ -984,8 +984,14 @@ var mu = mu || new function() { return; // Store the fetch promise so _loadExec can await it (even if still in-flight) var fetchUrl = mu._cfg.urlPrefix ? mu._cfg.urlPrefix + url : url; + var prefetchHeaders = {}; + // Merge custom headers if provided + if (mu._cfg.headers) + Object.assign(prefetchHeaders, mu._cfg.headers); + prefetchHeaders["X-Requested-With"] = "XMLHttpRequest"; + prefetchHeaders["X-Mu-Prefetch"] = "1"; var promise = fetch(fetchUrl, { - headers: {"X-Requested-With": "XMLHttpRequest", "X-Mu-Prefetch": "1"}, + headers: prefetchHeaders, priority: "low" }) .then(function(r) { return (r.ok ? r.text() : null); }) @@ -1313,16 +1319,18 @@ var mu = mu || new function() { // Build fetch options var fetchOpts = { signal: abortCtrl.signal, - headers: { - "X-Requested-With": "XMLHttpRequest", - "X-Mu-Mode": cfg.mode - } + headers: {} }; if (method !== "get") { fetchOpts.headers["X-Mu-Method"] = fetchOpts.method = method.toUpperCase(); if (cfg.postData) fetchOpts.body = cfg.postData; } + // Merge custom headers if provided + if (cfg.headers) + Object.assign(fetchOpts.headers, cfg.headers); + fetchOpts.headers["X-Requested-With"] = "XMLHttpRequest"; + fetchOpts.headers["X-Mu-Mode"] = cfg.mode; resp = await fetch(fetchUrl, fetchOpts); if (!resp.ok) { mu._emit("mu:fetch-error", {url: url, fetchUrl: fetchUrl, status: resp.status, response: resp});