Setup CORS for dev-server

src/api/client.ts

@@ -0,0 +1,13 @@
+import axios from "axios";
+
+export const login = (name: string, password: string) =>
+  axios.post("/access/login", {
+    name,
+    password,
+  });
+
+export const registerUser = (name: string, password: string) =>
+  axios.post("/access/register", {
+    name,
+    password,
+  });

src/context/EnvContext.ts

@@ -1,7 +0,0 @@
-import { createContext } from "react";
-
-interface EnvContextProps {
-  getRequestUrl: (path: string) => string;
-}
-
-export const EnvContext = createContext<EnvContextProps | null>(null);

src/context/EnvContextSupplier.tsx

@@ -1,16 +0,0 @@
-import type { PropsWithChildren } from "react";
-import { EnvContext } from "./EnvContext";
-
-interface EnvContextSupplieProps {
-  apiHostName: string;
-  apiPort: number;
-}
-
-export const EnvContextSupplier = (
-  props: PropsWithChildren<Partial<EnvContextSupplieProps>>,
-) => {
-  const { apiHostName = "http://localhost", apiPort = 3000 } = props;
-  const getRequestUrl = (path: string) => `${apiHostName}:${apiPort}${path}`;
-
-  return <EnvContext value={{ getRequestUrl }}>{props.children}</EnvContext>;
-};

src/main.tsx

@@ -3,16 +3,13 @@ import { createRoot } from "react-dom/client";
 import App from "./App.tsx";
 import { BrowserRouter } from "react-router";
 import { IntlProvider } from "react-intl";
-import { EnvContextSupplier } from "./context/EnvContextSupplier.tsx";
 
 createRoot(document.getElementById("root")!).render(
   <StrictMode>
-    <EnvContextSupplier>
     <BrowserRouter>
       <IntlProvider locale="es-ES" messages={{}}>
         <App />
       </IntlProvider>
     </BrowserRouter>
-    </EnvContextSupplier>
   </StrictMode>,
 );

src/pages/Login.tsx

@@ -5,24 +5,14 @@ import {
   Header,
   SpaceBetween,
 } from "@cloudscape-design/components";
-import axios from "axios";
-import { useContext, useState } from "react";
-import { EnvContext } from "../context/EnvContext";
+import { useState } from "react";
+import { login } from "../api/client";
 
 export const Login = () => {
   const [userName, setUserName] = useState("");
   const [password, setPassword] = useState("");
   const [rememberMe, setRememberMe] = useState(false);
 
-  const { getRequestUrl } = useContext(EnvContext)!;
-
-  const login = () => {
-    axios.post(getRequestUrl("/access/login"), {
-      name: userName,
-      password: password,
-    });
-  };
-
   return (
     <SpaceBetween size="s" alignItems={"center"}>
       <Header>Login</Header>
@@ -43,7 +33,7 @@ export const Login = () => {
       >
         Remember me
       </Checkbox>
-      <Button onClick={login}>Login</Button>
+      <Button onClick={() => login(userName, password)}>Login</Button>
     </SpaceBetween>
   );
 };

src/pages/Register.tsx

@@ -1,4 +1,4 @@
-import { useContext, useState } from "react";
+import { useState } from "react";
 import {
   Alert,
   Button,
@@ -7,8 +7,7 @@ import {
   SpaceBetween,
 } from "@cloudscape-design/components";
 import * as zod from "zod";
-import { EnvContext } from "../context/EnvContext";
-import axios from "axios";
+import { registerUser } from "../api/client";
 
 export const Register = () => {
   const [userName, setUserName] = useState("");
@@ -46,15 +45,6 @@ export const Register = () => {
     }
   }
 
-  const { getRequestUrl } = useContext(EnvContext)!;
-
-  const registerUser = () => {
-    axios.post(getRequestUrl("/access/register"), {
-      name: userName,
-      password: password,
-    });
-  };
-
   return (
     <SpaceBetween size="s" alignItems={"center"}>
       <Header>Register</Header>
@@ -78,7 +68,10 @@ export const Register = () => {
       {passwordErrors.map((error) => (
         <Alert type="error">{error}</Alert>
       ))}
-      <Button disabled={passwordErrors.length !== 0} onClick={registerUser}>
+      <Button
+        disabled={passwordErrors.length !== 0}
+        onClick={() => registerUser(userName, password)}
+      >
         Register
       </Button>
     </SpaceBetween>

vite.config.ts

@@ -3,5 +3,14 @@ import react from "@vitejs/plugin-react";
 
 // https://vite.dev/config/
 export default defineConfig({
+  server: {
+    proxy: {
+      "/access": {
+        target: "http://localhost:3000",
+        changeOrigin: true,
+        secure: false,
+      },
+    },
+  },
   plugins: [react()],
 });