feat(request): configurable base url and auth headers

Author: netchampfaris

src/utils/config.ts

@@ -21,6 +21,16 @@ export interface FrappeUIConfig {
 
   // Error handling
   fallbackErrorHandler?: (error: any) => void
+
+  // Base URL prepended to relative request URLs. Set this for local UI dev
+  // against a remote Frappe instance (cross-origin). When set, requests are
+  // sent with credentials so cross-origin auth works.
+  requestBaseUrl?: string
+
+  // Extra headers merged into every frappeRequest. Either a static object or a
+  // function returning headers (useful for injecting an Authorization header,
+  // e.g. `token <key>:<secret>`).
+  requestHeaders?: Record<string, string> | (() => Record<string, string>)
 }
 
 let config: FrappeUIConfig = {}

src/utils/frappeRequest.js

@@ -8,12 +8,17 @@ export function frappeRequest(options) {
       if (!options.url) {
         throw new Error('[frappeRequest] options.url is required')
       }
+      let configHeaders = getConfig('requestHeaders') || {}
+      if (typeof configHeaders === 'function') {
+        configHeaders = configHeaders()
+      }
       let headers = Object.assign(
         {
           Accept: 'application/json',
           'Content-Type': 'application/json; charset=utf-8',
           'X-Frappe-Site-Name': window.location.hostname,
         },
+        configHeaders,
         options.headers || {},
       )
       if (window.csrf_token && window.csrf_token !== '{{ csrf_token }}') {
@@ -22,10 +27,19 @@ export function frappeRequest(options) {
       if (!options.url.startsWith('/') && !options.url.startsWith('http')) {
         options.url = '/api/method/' + options.url
       }
+      // Prepend a configured base URL to relative URLs for local dev against a
+      // remote instance. Cross-origin requests need credentials included.
+      let baseUrl = getConfig('requestBaseUrl')
+      let credentials = options.credentials
+      if (baseUrl && options.url.startsWith('/')) {
+        options.url = baseUrl.replace(/\/$/, '') + options.url
+        credentials = credentials || 'include'
+      }
       return {
         ...options,
         method: options.method || 'POST',
         headers,
+        credentials,
       }
     },
     transformResponse: async (response, options) => {

src/utils/frappeRequest.test.ts

@@ -0,0 +1,64 @@
+// @vitest-environment jsdom
+import { describe, it, expect, vi, beforeEach, afterEach } from 'vitest'
+import { frappeRequest } from './frappeRequest'
+import { setConfig } from './config'
+
+function mockFetch() {
+  const fetchMock = vi.fn(async () => ({
+    ok: true,
+    json: async () => ({ message: 'ok' }),
+  }))
+  vi.stubGlobal('fetch', fetchMock)
+  return fetchMock
+}
+
+describe('frappeRequest configurable base url and auth headers', () => {
+  beforeEach(() => {
+    setConfig('requestBaseUrl', undefined)
+    setConfig('requestHeaders', undefined)
+  })
+
+  afterEach(() => {
+    vi.unstubAllGlobals()
+    setConfig('requestBaseUrl', undefined)
+    setConfig('requestHeaders', undefined)
+  })
+
+  it('keeps default behavior when nothing is configured', async () => {
+    const fetchMock = mockFetch()
+    await frappeRequest({ url: 'ping' })
+
+    const [url, opts] = fetchMock.mock.calls[0]
+    expect(url).toBe('/api/method/ping')
+    expect(opts.credentials).toBeUndefined()
+    expect(opts.headers.Authorization).toBeUndefined()
+  })
+
+  it('prepends the configured base url and includes credentials', async () => {
+    setConfig('requestBaseUrl', 'https://remote.frappe.test/')
+    const fetchMock = mockFetch()
+    await frappeRequest({ url: 'ping' })
+
+    const [url, opts] = fetchMock.mock.calls[0]
+    expect(url).toBe('https://remote.frappe.test/api/method/ping')
+    expect(opts.credentials).toBe('include')
+  })
+
+  it('injects static headers from config', async () => {
+    setConfig('requestHeaders', { Authorization: 'token key:secret' })
+    const fetchMock = mockFetch()
+    await frappeRequest({ url: 'ping' })
+
+    const [, opts] = fetchMock.mock.calls[0]
+    expect(opts.headers.Authorization).toBe('token key:secret')
+  })
+
+  it('injects headers from a function returning headers', async () => {
+    setConfig('requestHeaders', () => ({ Authorization: 'token dynamic:value' }))
+    const fetchMock = mockFetch()
+    await frappeRequest({ url: 'ping' })
+
+    const [, opts] = fetchMock.mock.calls[0]
+    expect(opts.headers.Authorization).toBe('token dynamic:value')
+  })
+})

src/utils/request.js

@@ -32,6 +32,7 @@ export function request(_options) {
     headers: options.headers,
     body,
     signal: options.signal,
+    ...(options.credentials ? { credentials: options.credentials } : {}),
   })
     .then((response) => {
       if (options.transformResponse) {