Cors

.eslintrc.json

@@ -1,3 +1,4 @@
 {
-  "extends": "next/core-web-vitals"
+  "extends": "next/core-web-vitals",
+  "ignorePatterns": ["node_modules/**"]
 }

next.config.js

@@ -10,6 +10,21 @@ const nextConfig = {
           },
         ],
       },
+      async headers() {
+        return [
+            {
+                // matching all API routes
+                source: "/api/:path*",
+                headers: [
+                    // CORS - enable for all soulstealer domains.
+                    { key: "Access-Control-Allow-Credentials", value: "true" },
+                    { key: "Access-Control-Allow-Origin", value: "*" },
+                    { key: "Access-Control-Allow-Methods", value: "GET,DELETE,PATCH,POST,PUT" },
+                    { key: "Access-Control-Allow-Headers", value: "X-CSRF-Token, X-Requested-With, Accept, Accept-Version, Content-Length, Content-MD5, Content-Type, Date, X-Api-Version" },
+                ]
+            }
+        ]
+    }
 }
 
 module.exports = nextConfig

package.json

@@ -1,6 +1,6 @@
 {
   "name": "image_resize",
-  "version": "0.1.0",
+  "version": "0.1.38",
   "private": true,
   "scripts": {
     "dev": "next dev",

pages/api/resize.ts

@@ -6,7 +6,7 @@ export default async function handler(
   res: NextApiResponse
 ) {
     const image_url = req.body.image_url || "";
-    let data;
+    let data:any;
     let status = 200;
 
     console.time('fetch');
@@ -41,7 +41,7 @@ export default async function handler(
       console.log(`Done with image "${image_url}".`);
     } catch (error) {
       status = 500;
-      data = error?.message;
+      data = {};
       // console.error({error});
     }
 

pages/resize.tsx

@@ -6,8 +6,8 @@ import { useEffect, useState } from "react";
 
 export default function Home() {
   const router = useRouter();
-  const {image_url: imageUrl} = router.query || "";
-  const [image, setImage] = useState(null)
+  const imageUrl = `${router.query.image_url}`;
+  const [image, setImage] = useState("")
 
   useEffect(() => {
     if (imageUrl) {
@@ -28,18 +28,20 @@ export default function Home() {
 
   return (
     <main className="">
-      <p>Resize for "{imageUrl}", blur:</p>
+      <p>Resize for {imageUrl}, blur:</p>
       {image && 
-        <Image 
+        <Image
+          alt="blur"
           src={image}
           width={400}
           height={400}
         />
       }
       <p>Full image using blur as placeholder:</p>
       {image && 
-        <Image 
-          src={imageUrl}
+        <Image
+          alt="original with blur"
+          src={imageUrl || ""}
           height={400}
           width={400}
           // fill={true}
@@ -49,7 +51,8 @@ export default function Home() {
       }
       <p>Full image:</p>
       {image && 
-        <Image 
+        <Image
+          alt="original"
           src={imageUrl}
           height={400}
           width={400}