Cors Fix

backend/.gitignore

@@ -20,4 +20,5 @@ pnpm-debug.log*
 *.ntvs*
 *.njsproj
 *.sln
-*.sw?
+*.sw?
+.vercel

frontend/docs/examples/react.mdx

@@ -19,18 +19,18 @@ description: A live example of the Final Space API using React.
 
 You can play around with this live example and add new features, styles and so much more.
 
-:::tip Hint 
+:::tip Hint
 Uncomment the following line:
- ```jsx
- <div className="card--text">{character.species}</div>
- ```
 
- PS: remove `{/* */}`
-:::
+```jsx
+<div className="card--text">{character.species}</div>
+```
 
-import Tabs from '@theme/Tabs';
-import TabItem from '@theme/TabItem';
+PS: remove `{/* */}`
+:::
 
+import Tabs from "@theme/Tabs"
+import TabItem from "@theme/TabItem"
 
 <Tabs
   defaultValue="react"
@@ -42,27 +42,27 @@ import TabItem from '@theme/TabItem';
 
 ```jsx live {18-22,26,27,29,31}
 function App() {
-  const [data, setData] = useState([]);
+  const [data, setData] = useState([])
 
   const cardStyle = {
     boxShadow: "0 5px 8px 0 rgba(0, 0, 0, 0.3)",
     padding: "12px",
     marginBottom: "10px",
     textAlign: "center",
     backgroundColor: "#fafafa",
-  };
+  }
   const rootStyle = {
     margin: "0 auto",
     width: "max-content",
     padding: "0 10px",
-    color:"purple",
-    fontFamily:"Verdana"
-  };
+    color: "purple",
+    fontFamily: "Verdana",
+  }
   useEffect(() => {
-    fetch("https://finalspaceapi.com/api/v0/character?limit=5")
+    fetch("http://localhost:3000/api/v0/character?limit=5")
       .then((res) => res.json())
-      .then((data) => setData(data));
-  }, []);
+      .then((data) => setData(data))
+  }, [])
 
   return (
     <div className="root" style={rootStyle}>
@@ -72,41 +72,44 @@ function App() {
             <img src={character.img_url} alt={character.name} />{" "}
           </div>
           <div className="card--title">{character.name}</div>
-        {/* <div className="card--text">{character.species}</div>*/}
+          {/* <div className="card--text">{character.species}</div>*/}
         </div>
       ))}
     </div>
-  );
+  )
 }
 ```
 
   </TabItem>
   <TabItem value="axios">
 
 ```jsx {19-23,27,28,30,32}
-{/* Not a Live Editor*/}
-import axios from 'axios'
+{
+  /* Not a Live Editor*/
+}
+import axios from "axios"
 
 function App() {
-  const [data, setData] = useState([]);
+  const [data, setData] = useState([])
 
   const cardStyle = {
     boxShadow: "0 5px 8px 0 rgba(0, 0, 0, 0.3)",
     padding: "12px",
     marginBottom: "10px",
     textAlign: "center",
     backgroundColor: "#fafafa",
-  };
+  }
   const rootStyle = {
     margin: "0 auto",
     width: "max-content",
     padding: "0 10px",
-  };
+  }
   useEffect(() => {
-    axios.get("https://finalspaceapi.com/api/v0/character?limit=5")
+    axios
+      .get("https://finalspaceapi.com/api/v0/character?limit=5")
       .then((res) => res.json())
-      .then((data) => setData(data));
-  }, []);
+      .then((data) => setData(data))
+  }, [])
 
   return (
     <div className="root" style={rootStyle}>
@@ -116,11 +119,11 @@ function App() {
             <img src={character.img_url} alt={character.name} />{" "}
           </div>
           <div className="card--title">{character.name}</div>
-        {/* <div className="card--text">{character.species}</div>*/}
+          {/* <div className="card--text">{character.species}</div>*/}
         </div>
       ))}
     </div>
-  );
+  )
 }
 ```
 

vercel.json

@@ -6,5 +6,22 @@
       "maxDuration": 300
     }
   },
-  "rewrites": [{ "source": "/(.*)", "destination": "/api" }]
+  "rewrites": [{ "source": "/(.*)", "destination": "/api" }],
+  "headers": [
+    {
+      "source": "/(.*)",
+      "headers": [
+        { "key": "Access-Control-Allow-Credentials", "value": "true" },
+        { "key": "Access-Control-Allow-Origin", "value": "*" },
+        {
+          "key": "Access-Control-Allow-Methods",
+          "value": "GET,OPTIONS,PATCH,DELETE,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"
+        }
+      ]
+    }
+  ]
 }