Foolproof request headers casing (#1157)

Author: arthurfiorette

src/cache/axios.ts

@@ -2,8 +2,8 @@ import type {
   AxiosInstance,
   AxiosInterceptorManager,
   AxiosRequestConfig,
+  AxiosRequestHeaders,
   AxiosResponse,
-  AxiosResponseHeaders,
   InternalAxiosRequestConfig
 } from 'axios';
 import type { CacheInstance, CacheProperties } from './cache.js';
@@ -94,7 +94,7 @@ export interface CacheRequestConfig<R = any, D = any> extends AxiosRequestConfig
 
 /** Cached version of type {@link InternalAxiosRequestConfig} */
 export interface InternalCacheRequestConfig<R = any, D = any> extends CacheRequestConfig<R, D> {
-  headers: AxiosResponseHeaders;
+  headers: AxiosRequestHeaders;
 }
 
 /**

src/header/extract.ts

@@ -1,3 +1,5 @@
+import type { AxiosRequestHeaders, AxiosResponseHeaders } from 'axios';
+
 /**
  * Extracts specified header values from request headers.
  * Generic utility for extracting a subset of headers.
@@ -7,13 +9,13 @@
  * @returns Object with extracted header values
  */
 export function extractHeaders(
-  requestHeaders: Record<string, any>,
+  requestHeaders: AxiosRequestHeaders | AxiosResponseHeaders,
   headerNames: string[]
-): Record<string, string> {
-  const result: Record<string, string> = {};
+): Record<string, string | undefined> {
+  const result: Record<string, string | undefined> = {};
 
   for (const name of headerNames) {
-    result[name] = String(requestHeaders[name.toLowerCase()] || '');
+    result[name] = requestHeaders.get(name)?.toString();
   }
 
   return result;

src/interceptors/request.ts

@@ -6,12 +6,7 @@ import { Header } from '../header/headers.js';
 import type { CachedResponse, LoadingStorageValue } from '../storage/types.js';
 import { regexOrStringMatch } from '../util/cache-predicate.js';
 import type { RequestInterceptor } from './build.js';
-import {
-  type ConfigWithCache,
-  createValidateStatus,
-  isMethodIn,
-  updateStaleRequest
-} from './util.js';
+import { createValidateStatus, isMethodIn, updateStaleRequest } from './util.js';
 
 export function defaultRequestInterceptor(axios: AxiosCacheInstance): RequestInterceptor {
   const onFulfilled: RequestInterceptor['onFulfilled'] = async (config) => {
@@ -110,9 +105,13 @@ export function defaultRequestInterceptor(axios: AxiosCacheInstance): RequestInt
     // shouldn't be cached an therefore neither in the browser.
     // https://stackoverflow.com/a/2068407
     if (config.cache.cacheTakeover) {
-      config.headers[Header.CacheControl] ??= 'no-cache, no-store, must-revalidate, max-age=0';
-      config.headers[Header.Pragma] ??= 'no-cache';
-      config.headers[Header.Expires] ??= '0';
+      config.headers.set(
+        Header.CacheControl,
+        'no-cache, no-store, must-revalidate, max-age=0',
+        false
+      );
+      config.headers.set(Header.Pragma, 'no-cache', false);
+      config.headers.set(Header.Expires, '0', false);
     }
 
     if (!isMethodIn(config.method, config.cache.methods)) {
@@ -232,7 +231,7 @@ export function defaultRequestInterceptor(axios: AxiosCacheInstance): RequestInt
       // The override option is meant to bypass cache and get fresh data, not revalidate existing cache.
       // Adding conditional headers would cause the server to return 304 Not Modified instead of fresh data.
       if ((cache.state === 'stale' || cache.state === 'must-revalidate') && !overrideCache) {
-        updateStaleRequest(cache, config as ConfigWithCache<unknown>);
+        updateStaleRequest(cache, { ...config, cache: config.cache });
 
         if (__ACI_DEV__) {
           axios.debug({

src/interceptors/util.ts

@@ -1,5 +1,9 @@
 import type { Method } from 'axios';
-import type { CacheAxiosResponse, CacheRequestConfig } from '../cache/axios.js';
+import type {
+  CacheAxiosResponse,
+  CacheRequestConfig,
+  InternalCacheRequestConfig
+} from '../cache/axios.js';
 import type { CacheProperties } from '../cache/cache.js';
 import { Header } from '../header/headers.js';
 import type {
@@ -29,7 +33,7 @@ export function isMethodIn(
   return methodList.some((method) => method === requestMethod);
 }
 
-export interface ConfigWithCache<D> extends CacheRequestConfig<unknown, D> {
+export interface ConfigWithCache<D> extends InternalCacheRequestConfig<unknown, D> {
   cache: Partial<CacheProperties<unknown, D>>;
 }
 
@@ -41,25 +45,24 @@ export function updateStaleRequest<D>(
   cache: StaleStorageValue | MustRevalidateStorageValue,
   config: ConfigWithCache<D>
 ): void {
-  config.headers ||= {};
-
   const { etag, modifiedSince } = config.cache;
 
   if (etag) {
-    const etagValue = etag === true ? (cache.data?.headers[Header.ETag] as unknown) : etag;
+    const etagValue = etag === true ? cache.data?.headers[Header.ETag] : etag;
 
     if (etagValue) {
-      config.headers[Header.IfNoneMatch] = etagValue;
+      config.headers.set(Header.IfNoneMatch, etagValue);
     }
   }
 
   if (modifiedSince) {
-    config.headers[Header.IfModifiedSince] =
+    config.headers.set(
+      Header.IfModifiedSince,
+      // If last-modified is not present, use the createdAt timestamp
       modifiedSince === true
-        ? // If last-modified is not present, use the createdAt timestamp
-          (cache.data.headers[Header.LastModified] as unknown) ||
-          new Date(cache.createdAt).toUTCString()
-        : modifiedSince.toUTCString();
+        ? cache.data.headers[Header.LastModified] || new Date(cache.createdAt).toUTCString()
+        : modifiedSince.toUTCString()
+    );
   }
 }
 

src/storage/types.ts

@@ -17,7 +17,7 @@ export interface CachedResponseMeta {
    *   vary: { authorization: 'Bearer X' }
    * }
    */
-  vary?: Record<string, string>;
+  vary?: Record<string, string | undefined>;
 }
 
 export interface CachedResponse {

test/interceptors/request.test.ts

@@ -377,10 +377,23 @@ describe('Request Interceptor', () => {
       cache: { cacheTakeover: false }
     });
 
-    const headers2 = req2.request.config.headers as Record<string, string>;
-    assert.equal(headers2[Header.CacheControl], undefined);
-    assert.equal(headers2[Header.Pragma], undefined);
-    assert.equal(headers2[Header.Expires], undefined);
+    const headers2 = req2.request.config.headers;
+    assert.equal(headers2.get(Header.CacheControl), undefined);
+    assert.equal(headers2.get(Header.Pragma), undefined);
+    assert.equal(headers2.get(Header.Expires), undefined);
+
+    const req3 = await axios.get('url3', {
+      cache: { cacheTakeover: true },
+      headers: { PRAGma: 'my-custom-value' }
+    });
+
+    const headers3 = req3.request.config.headers;
+    assert.equal(
+      headers3.get(Header.CacheControl),
+      'no-cache, no-store, must-revalidate, max-age=0'
+    );
+    assert.equal(headers3.get(Header.Pragma), 'my-custom-value');
+    assert.equal(headers3.get(Header.Expires), '0');
   });
 
   it('ensure cached data is not transformed', async () => {

test/interceptors/vary.test.ts

@@ -36,11 +36,11 @@ describe('Vary Header Support', () => {
     });
 
     const resp2 = await axios.get('url', {
-      headers: { authorization: 'Bearer A', 'accept-language': 'en' }
+      headers: { authorization: 'Bearer A', 'Accept-Language': 'en' }
     });
 
     const resp3 = await axios.get('url', {
-      headers: { authorization: 'Bearer A', 'accept-language': 'fr' }
+      headers: { authorization: 'Bearer A', 'ACCEPT-LANGUAGE': 'fr' }
     });
 
     assert.equal(resp1.cached, false);
@@ -59,22 +59,22 @@ describe('Vary Header Support', () => {
       return { user: Math.random(), call: networkCallCount, timestamp: Date.now() };
     });
 
-    // 9 concurrent requests: 3 variations, 3 requests each
+    // 9 concurrent requests: 3 variations, 3 requests each (in different casing)
     const requests = [
       // 3 with Bearer A
       axios.get('url', { headers: { authorization: 'Bearer A' } }),
-      axios.get('url', { headers: { authorization: 'Bearer A' } }),
+      axios.get('url', { headers: { auTHORIZAtion: 'Bearer A' } }),
       axios.get('url', { headers: { authorization: 'Bearer A' } }),
 
       // 3 with Bearer B
-      axios.get('url', { headers: { authorization: 'Bearer B' } }),
-      axios.get('url', { headers: { authorization: 'Bearer B' } }),
-      axios.get('url', { headers: { authorization: 'Bearer B' } }),
+      axios.get('url', { headers: { Authorization: 'Bearer B' } }),
+      axios.get('url', { headers: { AUTHORIZATION: 'Bearer B' } }),
+      axios.get('url', { headers: { auTHOrization: 'Bearer B' } }),
 
       // 3 with Bearer C
-      axios.get('url', { headers: { authorization: 'Bearer C' } }),
-      axios.get('url', { headers: { authorization: 'Bearer C' } }),
-      axios.get('url', { headers: { authorization: 'Bearer C' } })
+      axios.get('url', { headers: { authOrization: 'Bearer C' } }),
+      axios.get('url', { headers: { authorIZAtion: 'Bearer C' } }),
+      axios.get('url', { headers: { authorizATion: 'Bearer C' } })
     ];
 
     const responses = await Promise.all(requests);