warn of localhost requests

MazuhSoftwares · Mar 2, 2024 · a9adef8 · a9adef8
1 parent 9c8c145
commit a9adef8
Show file tree

Hide file tree

Showing 2 changed files with 34 additions and 3 deletions.
diff --git a/src/entities/http-for-dummies.ts b/src/entities/http-for-dummies.ts
@@ -1,4 +1,18 @@
+/**
+ * Some HTTP-related utilities.
+ */
+
 import { ProjectRequestSpec } from "@/entities/project-entities";
+import { RequestSnapshot } from "./runtime-entities";
+
+export function isRequestingToLocalhost(request: RequestSnapshot): boolean {
+  return [
+    "http://localhost",
+    "https://localhost",
+    "http://127.0.0.1",
+    "https://127.0.0.1",
+  ].some((localBeginning) => request.url.startsWith(localBeginning));
+}
 
 /** HTTP methods but as constants. */
 export const HTTP_METHODS: Array<ProjectRequestSpec["method"]> = [

diff --git a/src/features/project-workspace/Runtime.tsx b/src/features/project-workspace/Runtime.tsx
@@ -12,6 +12,7 @@ import {
   ResponseSnapshot,
   RuntimeState,
 } from "@/entities/runtime-entities";
+import { Anchor } from "@/components/ui/typography";
 import {
   Select,
   SelectContent,
@@ -27,12 +28,12 @@ import {
   CollapsibleTrigger,
 } from "@/components/ui/collapsible";
 import { Progress } from "@/components/ui/progress";
-import { useRequestsSpecs } from "./RequestsSpecsContext";
 import {
   HTTP_METHODS,
   getMethodExplanation,
   getStatusExplanation,
   getStatusText,
+  isRequestingToLocalhost,
 } from "../../entities/http-for-dummies";
 import { cn } from "@/lib/utils";
 import {
@@ -41,6 +42,7 @@ import {
   DialogHeader,
   DialogTitle,
 } from "@/components/ui/dialog";
+import { useRequestsSpecs } from "./RequestsSpecsContext";
 
 export interface RuntimeProps {
   specUuid: ProjectRequestSpec["uuid"];
@@ -229,7 +231,7 @@ export function Runtime(props: RuntimeProps) {
           <div>
             <h3 className="text-red-400 mb-3">Error</h3>
             {runtime.errorMessage ? (
-              <p>
+              <p className="mb-5">
                 <strong>Browser reason:</strong>{" "}
                 <code>{runtime.errorMessage}</code>
               </p>
@@ -238,7 +240,22 @@ export function Runtime(props: RuntimeProps) {
                 For <strong>unknown</strong> reasons.
               </p>
             )}
-            <p>
+            {isRequestingToLocalhost(runtime.request) && (
+              <p className="mb-5">
+                <span role="img" aria-label="Idea">
+                  💡
+                </span>
+                You're requesting <code>localhost</code>, it can be a classic{" "}
+                <Anchor
+                  href="https://stackoverflow.com/a/46505542"
+                  target="_blank"
+                >
+                  CORS policy
+                </Anchor>{" "}
+                issue.
+              </p>
+            )}
+            <p className="mb-5">
               This specific error was thrown by your own browser, not exactly
               the server.
               <br />