Merge pull request #12 from KOREAN139/fix/proxy

Use proxy to use api from server
YuqiHuai · Jun 30, 2022 · 00a2148 · 00a2148
2 parents 25e0799 + a07cfe8
commit 00a2148
Show file tree

Hide file tree

Showing 8 changed files with 24 additions and 11 deletions.
diff --git a/client/package-lock.json b/client/package-lock.json
diff --git a/client/package.json b/client/package.json
@@ -10,6 +10,7 @@
     "@types/node": "^16.11.36",
     "@types/react": "^18.0.9",
     "@types/react-dom": "^18.0.4",
+    "http-proxy-middleware": "^2.0.6",
     "react": "^18.1.0",
     "react-dom": "^18.1.0",
     "react-router-dom": "^6.3.0",

diff --git a/client/src/pages/Maps.tsx b/client/src/pages/Maps.tsx
@@ -12,7 +12,7 @@ function Maps() {
   useEffect(() => {
     const fetchData = async () => {
       const res = await fetch(
-        `${process.env.REACT_APP_SERVER_URL}/api/v1/maps`
+        `/api/v1/maps`
       );
       const data = await res.json();
       setData(data.rows as Map[]);
@@ -42,7 +42,7 @@ function Maps() {
                   <span className="absolute top-5 left-5 text-white text-lg font-medium">{`${value.owner.firstName} ${value.owner.lastName}`}</span>
                   <img
                     className="w-full rounded"
-                    src={`${process.env.REACT_APP_SERVER_URL}${value.imageUrl}?type=small`}
+                    src={`${value.imageUrl}?type=small`}
                   />
                   <p className="text-lg font-semibold mt-2 truncate">
                     {value.name}

diff --git a/client/src/pages/Plugins.tsx b/client/src/pages/Plugins.tsx
@@ -11,7 +11,7 @@ function Plugins() {
   useEffect(() => {
     const fetchData = async () => {
       const res = await fetch(
-        `${process.env.REACT_APP_SERVER_URL}/api/v1/plugins`
+        `/api/v1/plugins`
       );
       const data = await res.json();
       setData(data.rows as Plugin[]);
@@ -51,7 +51,7 @@ function Plugins() {
 
                   <img
                     className="w-full rounded"
-                    src={`${process.env.REACT_APP_SERVER_URL}${value.imageUrl}?type=small`}
+                    src={`${value.imageUrl}?type=small`}
                   />
                   <p className="text-lg font-semibold mt-2 truncate">
                     {value.name}

diff --git a/client/src/pages/Simulations.tsx b/client/src/pages/Simulations.tsx
@@ -3,13 +3,13 @@ import Layout from "../components/Layout";
 
 function Simulations() {
   const onStopSimulation = () => {
-    fetch(`${process.env.REACT_APP_SERVER_URL}/api/v1/clusters/stop`);
+    fetch(`/api/v1/clusters/stop`);
   };
   const onDisconnectSimulator = () => {
-    fetch(`${process.env.REACT_APP_SERVER_URL}/api/v1/clusters/disconnect`);
+    fetch(`/api/v1/clusters/disconnect`);
   };
   const onStartSimulation = () => {
-    fetch(`${process.env.REACT_APP_SERVER_URL}/api/v1/clusters/start/apiOnly`);
+    fetch(`/api/v1/clusters/start/apiOnly`);
   };
 
   return (

diff --git a/client/src/pages/Vehicle/VehiclePage.tsx b/client/src/pages/Vehicle/VehiclePage.tsx
@@ -13,7 +13,7 @@ function VehiclePage() {
   useEffect(() => {
     const fetchData = async () => {
       const res = await fetch(
-        `${process.env.REACT_APP_SERVER_URL}/api/v1${location.pathname}`
+        `/api/v1${location.pathname}`
       );
       const data = await res.json();
       setVehicle(data as Vehicle);
@@ -64,7 +64,7 @@ function VehiclePage() {
           </div>
           <div>
             <img
-              src={`${process.env.REACT_APP_SERVER_URL}${vehicle.imageUrl}`}
+              src={`${vehicle.imageUrl}`}
             />
           </div>
           <div>

diff --git a/client/src/pages/Vehicle/Vehicles.tsx b/client/src/pages/Vehicle/Vehicles.tsx
@@ -13,7 +13,7 @@ function Vehicles() {
   useEffect(() => {
     const fetchData = async () => {
       const res = await fetch(
-        `${process.env.REACT_APP_SERVER_URL}/api/v1/vehicles`
+        `/api/v1/vehicles`
       );
       const data = await res.json();
       setData(data.rows as Vehicle[]);
@@ -46,7 +46,7 @@ function Vehicles() {
                     <span className="absolute top-5 left-5 text-white text-lg font-medium">{`${value.owner.firstName} ${value.owner.lastName}`}</span>
                     <img
                       className="w-full rounded"
-                      src={`${process.env.REACT_APP_SERVER_URL}${value.imageUrl}?type=small`}
+                      src={`${value.imageUrl}?type=small`}
                     />
                     <p className="text-lg font-semibold mt-2 truncate">
                       {value.name}

diff --git a/client/src/setupProxy.js b/client/src/setupProxy.js
@@ -0,0 +1,11 @@
+const { createProxyMiddleware } = require('http-proxy-middleware');
+
+module.exports = function(app) {
+  app.use(
+    '/',
+    createProxyMiddleware({
+      target: process.env.REACT_APP_SERVER_URL,
+      changeOrigin: true,
+    })
+  );
+};