handle head and options requests

README.md

@@ -123,48 +123,60 @@ The Workers Free plan includes limited KV usage, but the quota is sufficient for
 
 WIP - Support for Durable Objects - Cloudflare's product for low-latency coordination and consistent storage for the Workers platform. There is a working prototype, however, we are waiting for at least open beta.
 
-There is also a managed version of this project, currently in beta. Feel free to check it out https://statusflare.com (https://twitter.com/statusflare_com).
+There is also a managed version of this project, currently in beta. Feel free to check it out <https://statusflare.com> (<https://twitter.com/statusflare_com>).
 
 ## Running project locally
+
 **Requirements**
+
 - Linux or WSL
 - Yarn (`npm i -g yarn`)
 - Node 14+
 
 ### Steps to get server up and running
+
 **Install wrangler**
+
 ```
 npm i -g wrangler
 ```
 
 **Login With Wrangler to Cloudflare**
+
 ```
 wrangler login
 ```
 
 **Create your KV namespace in cloudflare**
+
 ```
 On the workers page navigate to KV, and create a namespace
 ```
 
 **Update your wrangler.toml with**
+
 ```
 kv-namespaces = [{binding="KV_STATUS_PAGE", id="<KV_ID>", preview_id="<KV_ID>"}]
 ```
+
 _Note: you may need to change `kv-namespaces` to `kv_namespaces`_
 
 **Install packages**
+
 ```
 yarn install
 ```
 
 **Create CSS**
+
 ```
 yarn run css
 ```
 
 **Run**
+
 ```
 yarn run dev
 ```
+
 _Note: If the styles do not come through try using `localhost:8787` instead of `localhost:8080`_

index.js

@@ -12,9 +12,13 @@ const DEBUG = false
 
 addEventListener('fetch', (event) => {
   try {
-    event.respondWith(
-      handleEvent(event, require.context('./pages/', true, /\.js$/), DEBUG),
-    )
+    if (request.method === 'HEAD' || request.method === 'OPTIONS') {
+      return handleOptions(event.request)
+    } else {
+      event.respondWith(
+        handleEvent(event, require.context('./pages/', true, /\.js$/), DEBUG),
+      )
+    }
   } catch (e) {
     if (DEBUG) {
       return event.respondWith(
@@ -30,3 +34,35 @@ addEventListener('fetch', (event) => {
 addEventListener('scheduled', (event) => {
   event.waitUntil(processCronTrigger(event))
 })
+
+// We support the GET, POST, HEAD, and OPTIONS methods from any origin,
+// and accept the Content-Type header on requests. These headers must be
+// present on all responses to all CORS requests. In practice, this means
+// all responses to OPTIONS or POST requests.
+const corsHeaders = {
+  'Access-Control-Allow-Origin': '*',
+  'Access-Control-Allow-Methods': 'GET, HEAD, POST, OPTIONS',
+  'Access-Control-Allow-Headers': 'Content-Type',
+}
+
+function handleOptions(request) {
+  if (
+    request.headers.get('Origin') !== null &&
+    request.headers.get('Access-Control-Request-Method') !== null &&
+    request.headers.get('Access-Control-Request-Headers') !== null
+  ) {
+    // Handle CORS pre-flight request.
+    return new Response(null, {
+      headers: corsHeaders,
+      status: 200,
+    })
+  } else {
+    // Handle standard OPTIONS request.
+    return new Response(null, {
+      headers: {
+        Allow: 'GET, HEAD, POST, OPTIONS, PUT, DELETE, PATCH',
+        status: '200',
+      },
+    })
+  }
+}

package.json

@@ -14,7 +14,7 @@
     "css": "postcss public/tailwind.css -o public/style.css"
   },
   "dependencies": {
-    "flareact": "^0.10.0",
+    "flareact": "^1.5.0",
     "laco": "^1.2.1",
     "laco-react": "^1.1.0",
     "react": "^17.0.1",

wrangler.toml

@@ -1,19 +1,20 @@
 name = "cf-workers-status-page"
 workers_dev = true
-account_id = ""
-type = "webpack"
-webpack_config = "node_modules/flareact/webpack"
+#account_id = ""
+#type = "webpack"
+#webpack_config = "node_modules/flareact/webpack"
 compatibility_date = "2021-07-23"
+main = "index.js"
 
 [triggers]
 crons = ["*/2 * * * *"]
 
 [site]
 bucket = "out"
-entry-point = "./"
+#entry-point = "./"
 
 # uncomment and adjust following if you are not using GitHub Actions
-#[env.production]
-#kv-namespaces = [{binding="KV_STATUS_PAGE", id="xxxx", preview_id=""}]
-#zone_id="xxx"
-#route="xxx"
+[env.production]
+kv-namespaces = [{binding="KV_STATUS_PAGE", id="b2833996374a461da38f4264c67b3374", preview_id=""}]
+# zone_id="xxx"
+# route="xxx"

yarn.lock

@@ -3112,10 +3112,10 @@ findup-sync@^3.0.0:
     micromatch "^3.0.4"
     resolve-dir "^1.0.1"
 
-flareact@^0.10.0:
-  version "0.10.0"
-  resolved "https://registry.yarnpkg.com/flareact/-/flareact-0.10.0.tgz#1129eb5f1ef9048a66ba5319fa75ad27d5cc7842"
-  integrity sha512-BwcuJsNm1vuNs+V87Xs88ytTzGX2w5HAf4tOvThHAeWc4fEt8ID2m3fBLytPOO4ad+2mTYKwJE7Y5AzsNPx5hQ==
+flareact@^0.10.1:
+  version "0.10.1"
+  resolved "https://registry.yarnpkg.com/flareact/-/flareact-0.10.1.tgz#d28af1ff07ea1708831bada6045a0b8dcc520ccf"
+  integrity sha512-s6/FTaJaHWpV5nCWxTh9kn/wtdsUZNaqOICSYppH+mnIKXLcEZ3aRuwUEPELZ2EoPhTMSHRwRdCyPyHrtvVF5A==
   dependencies:
     "@babel/core" "^7.11.0"
     "@babel/plugin-transform-runtime" "^7.11.0"