Set CORS headers

app/routes/questions/glossary.ts

@@ -1,11 +1,13 @@
+import {jsonCORS} from '../../server-utils/responses'
 import {LoaderArgs} from '@remix-run/cloudflare'
 import {reloadInBackgroundIfNeeded} from '~/server-utils/kv-cache'
 import {loadGlossary} from '~/server-utils/stampy'
 
 export const loader = async ({request}: LoaderArgs) => {
-  return await loadGlossary(request)
+  const data = await loadGlossary(request)
+  return jsonCORS<typeof data>(data)
 }
-type Data = ReturnType<typeof loader>
+type Data = ReturnType<typeof loadGlossary>
 
 export function fetchGlossary() {
   const url = `/questions/glossary`

app/routes/questions/search.tsx

@@ -1,4 +1,5 @@
 import type {LoaderArgs} from '@remix-run/cloudflare'
+import {jsonCORS} from '../../server-utils/responses'
 
 export const loader = async ({request}: LoaderArgs) => {
   const url = new URL(request.url)
@@ -7,7 +8,8 @@ export const loader = async ({request}: LoaderArgs) => {
 
   if (!question) return []
 
-  return await search(question, onlyLive)
+  const results = await search(question, onlyLive)
+  return jsonCORS(results)
 }
 
 export function search(question: string, onlyLive: boolean) {

app/server-utils/responses.ts

@@ -0,0 +1,9 @@
+import {json} from '@remix-run/cloudflare'
+
+export const jsonCORS = <T>(data: T) =>
+  json(data, {
+    headers: {
+      'Access-Control-Allow-Methods': 'GET, OPTIONS',
+      'Access-Control-Allow-Origin': ALLOW_ORIGINS,
+    },
+  })

remix.env.d.ts

@@ -7,3 +7,4 @@ declare const CODA_TOKEN: string
 declare const CODA_INCOMING_TOKEN: string
 declare const CODA_WRITES_TOKEN: string
 declare const NLP_SEARCH_ENDPOINT: string
+declare const ALLOW_ORIGINS: string

server.js

@@ -1,4 +1,29 @@
-import {createEventHandler} from '@remix-run/cloudflare-workers'
+import url from 'url'
+import {createEventHandler, handleAsset} from '@remix-run/cloudflare-workers'
 import * as build from '@remix-run/dev/server-build'
 
-addEventListener('fetch', createEventHandler({build, mode: process.env.NODE_ENV}))
+const CORS_ASSETS = ['/tfWorker.js']
+
+const isCorsEnabledAsset = (event) => {
+  const parsedUrl = url.parse(event.request.url)
+  const pathname = parsedUrl.pathname
+
+  return CORS_ASSETS.includes(pathname)
+}
+
+const fetchCorsAsset = (event) => {
+  const resp = handleAsset(event, build)
+  return event.respondWith(
+    resp.then((res) => {
+      const headers = new Headers(res.headers)
+      headers.set('Access-Control-Allow-Origin', ALLOW_ORIGINS || '')
+      headers.set('Access-Control-Allow-Methods', 'GET, OPTIONS')
+      return new Response(res.body, {headers})
+    })
+  )
+}
+
+const handler = createEventHandler({build, mode: process.env.NODE_ENV})
+addEventListener('fetch', async (event) =>
+  isCorsEnabledAsset(event) ? fetchCorsAsset(event) : handler(event)
+)

wrangler.toml.template

@@ -20,3 +20,4 @@ CODA_TOKEN = "{CODA_TOKEN}"
 CODA_INCOMING_TOKEN = "{CODA_INCOMING_TOKEN}"
 CODA_WRITES_TOKEN = "{CODA_WRITES_TOKEN}"
 NLP_SEARCH_ENDPOINT = "https://stampy-nlp-t6p37v2uia-uw.a.run.app/"
+ALLOW_ORIGINS = "https://chat.aisafety.info"