Apply proper headers across all fetch methods

osu-tournament-rating · Oct 29, 2023 · 391b4c1 · 391b4c1
1 parent 9c23b45
commit 391b4c1
Show file tree

Hide file tree

Showing 4 changed files with 38 additions and 22 deletions.
diff --git a/src/components/LinkSubmissionForm.tsx b/src/components/LinkSubmissionForm.tsx
@@ -30,12 +30,17 @@ function LinkSubmissionForm({
     useState(false);
 
   const apiLink = process.env.REACT_APP_API_URL;
+  const origin = process.env.REACT_APP_ORIGIN_URL;
   const navigate = useNavigate();
-
+  
   useEffect(() => {
     fetch(apiLink + "/me", {
       method: "GET",
       credentials: "include",
+      headers: {
+        "Content-Type": "application/json",
+        "Access-Control-Allow-Origin": `${origin}`,
+      }
     })
       .then((response) => response.json())
       .then((data) => {

diff --git a/src/components/VerifiedTournaments.tsx b/src/components/VerifiedTournaments.tsx
@@ -11,10 +11,16 @@ function VerifiedTournaments({ hasVerifierRole }: IVerifiedTournamentProps) {
         if(!hasVerifierRole) {
             return;
         }
-
-        fetch(process.env.REACT_APP_API_URL + "/tournaments/verified", {
+
+        const apiUrl = process.env.REACT_APP_API_URL;
+        const origin = process.env.REACT_APP_ORIGIN_URL;
+        fetch(apiUrl + "/tournaments/verified", {
             method: "GET",
             credentials: "include",
+            headers: {
+                "Content-Type": "application/json",
+                "Access-Control-Allow-Origin": `${origin}`
+            }
         })
         .then((response) => response.json())
         .then((data) => {

diff --git a/src/components/pages/Auth.tsx b/src/components/pages/Auth.tsx
@@ -7,26 +7,26 @@ function Auth({ isAuthenticated, setIsAuthenticated, setAuthenticatedUser }: IAu
   const code = params.get("code");
   const navigate = useNavigate();
 
-  const apiLink = process.env.REACT_APP_API_URL;
+  const apiUrl = process.env.REACT_APP_API_URL;
   const origin = process.env.REACT_APP_ORIGIN_URL;
 
   useEffect(() => {
     console.log("Logging in after osu! redirect");
 
     // make api call to login with code
-    fetch(apiLink + '/login?code=' + code, {
+    fetch(apiUrl + '/login?code=' + code, {
       method: "POST",
+      credentials: "include",
       headers: {
         "Content-Type": "application/json",
         "Access-Control-Allow-Origin": `${origin}`,
       },
-      credentials: "include",
     })
       .then((response) => {
         if (response.status !== 200) {
-            throw new Error("Authorization failed!");
+          throw new Error("Authorization failed!");
         }
-        
+
         setIsAuthenticated(true);
         navigate("/", { replace: true });
       })
@@ -40,19 +40,24 @@ function Auth({ isAuthenticated, setIsAuthenticated, setAuthenticatedUser }: IAu
         );
       });
 
-      fetch(apiLink + "/me", {
-        method: "GET",
-        credentials: "include",
-        })
-        .then((response) => response.json())
-        .then((data) => {
-            setAuthenticatedUser(data);
-        })
-        .catch((error) => {
-            console.error("Error fetching authenticated user:", error);
-        });
-
-  }, [apiLink, code, navigate, setIsAuthenticated, setAuthenticatedUser]);
+    const origin = process.env.REACT_APP_ORIGIN_URL;
+    fetch(apiUrl + "/me", {
+      method: "GET",
+      credentials: "include",
+      headers: {
+        "Content-Type": "application/json",
+        "Access-Control-Allow-Origin": `${origin}`,
+      }
+    })
+      .then((response) => response.json())
+      .then((data) => {
+        setAuthenticatedUser(data);
+      })
+      .catch((error) => {
+        console.error("Error fetching authenticated user:", error);
+      });
+
+  }, [apiUrl, code, navigate, setIsAuthenticated, setAuthenticatedUser]);
 
   return (
     <>

diff --git a/src/components/pages/Dashboard.tsx b/src/components/pages/Dashboard.tsx
@@ -28,11 +28,11 @@ function Dashboard({ isAuthenticated, mode }: { isAuthenticated: boolean, mode:
     const origin = process.env.REACT_APP_ORIGIN_URL;
     fetch(apiLink + "/me/stats?dateMin=" + formattedDate + "&mode=" + mode, {
       method: "GET",
+      credentials: "include",
       headers: {
         "Content-Type": "application/json",
         "Access-Control-Allow-Origin": `${origin}`,
       },
-      credentials: "include",
     })
       .then((response) => response.json())
       .then((data) => {