Route docsearch to Vercel proxy and forward X-MS-USER-ID server-side

Author: web-flow

docusaurus/api/meili-search.js

@@ -0,0 +1,49 @@
+export default async function handler(req, res) {
+  if (req.method !== 'POST') {
+    res.status(405).json({ error: 'Method Not Allowed' });
+    return;
+  }
+
+  try {
+    const { indexUid } = req.query || {};
+    if (!indexUid) {
+      res.status(400).json({ error: 'Missing indexUid' });
+      return;
+    }
+
+    const host = process.env.MEILI_HOST || process.env.NEXT_PUBLIC_MEILI_HOST || '';
+    const apiKey = process.env.MEILI_API_KEY || process.env.NEXT_PUBLIC_MEILI_API_KEY || '';
+    if (!host || !apiKey) {
+      res.status(500).json({ error: 'Meilisearch host or API key not configured' });
+      return;
+    }
+
+    const userIdFromCookie = (() => {
+      try {
+        const cookie = req.headers['cookie'] || '';
+        const match = cookie.match(/(?:^|;\s*)msUserId=([^;]+)/);
+        return match ? decodeURIComponent(match[1]) : undefined;
+      } catch {
+        return undefined;
+      }
+    })();
+
+    const url = new URL(`/indexes/${encodeURIComponent(indexUid)}/search`, host);
+    const meiliRes = await fetch(url.toString(), {
+      method: 'POST',
+      headers: {
+        'Content-Type': 'application/json',
+        'Authorization': `Bearer ${apiKey}`,
+        'X-Meilisearch-Client': req.headers['x-meilisearch-client'] || 'StrapiDocs Proxy',
+        ...(userIdFromCookie ? { 'X-MS-USER-ID': userIdFromCookie } : {}),
+      },
+      body: JSON.stringify(req.body || {}),
+    });
+
+    const data = await meiliRes.json();
+    res.status(meiliRes.status).json(data);
+  } catch (e) {
+    res.status(500).json({ error: e.message || 'Proxy error' });
+  }
+}
+

docusaurus/docusaurus.config.js

@@ -130,8 +130,8 @@ const config = {
   ],
   customFields: {
     meilisearch: {
-      host: 'https://ms-47f23e4f6fb9-30446.fra.meilisearch.io',
-      apiKey: '45326fd7e6278ec3fc83af7a5c20a2ab4261f8591bd186adf8bf8f962581622b',
+      host: process.env.NEXT_PUBLIC_MEILI_HOST || 'https://ms-47f23e4f6fb9-30446.fra.meilisearch.io',
+      apiKey: process.env.NEXT_PUBLIC_MEILI_API_KEY || '45326fd7e6278ec3fc83af7a5c20a2ab4261f8591bd186adf8bf8f962581622b',
       indexUid: 'strapi-docs',
       searchParams: {
         attributesToHighlight: null

docusaurus/src/theme/SearchBar/index.js

@@ -39,6 +39,12 @@ function SearchBarContent() {
       const uuid = (typeof crypto !== 'undefined' && crypto.randomUUID) ? crypto.randomUUID() : Math.random().toString(36).slice(2) + Date.now().toString(36);
       const value = JSON.stringify({ id: uuid, month: monthKey });
       window.localStorage.setItem(key, value);
+      try {
+        // Also set a same‑origin cookie so serverless proxy can read it
+        const ttlDays = 45; // longer than a month for safety; we rotate monthly client‑side
+        const maxAge = ttlDays * 24 * 60 * 60;
+        document.cookie = `msUserId=${uuid}; Max-Age=${maxAge}; Path=/; SameSite=Lax` + (window.location.protocol === 'https:' ? '; Secure' : '');
+      } catch {}
       return uuid;
     } catch (_) {
       return null;
@@ -158,9 +164,12 @@ function SearchBarContent() {
         import('meilisearch-docsearch'),
         import('meilisearch-docsearch/css')
       ]).then(([{ docsearch }]) => {
+        const meiliHost = siteConfig.customFields.meilisearch.host;
+        // Use proxy on non-localhost to avoid CORS limits and inject server-side header
+        const useProxy = typeof window !== 'undefined' && window.location && window.location.hostname !== 'localhost';
         const baseOptions = {
           container: searchButtonRef.current,
-          host: siteConfig.customFields.meilisearch.host,
+          host: useProxy ? `${window.location.origin}/api` : meiliHost,
           apiKey: siteConfig.customFields.meilisearch.apiKey,
           indexUid: siteConfig.customFields.meilisearch.indexUid,
 
@@ -256,6 +265,8 @@ function SearchBarContent() {
 
         const search = docsearch(baseOptions);
 
+        // If using proxy, docsearch will call `${origin}/api/indexes/<uid>/search`
+
         searchInstanceRef.current = search;
         setIsLoaded(true);