12/03/2025

Notes

@@ -0,0 +1,26 @@
+Setting up a CORS proxy in a Vue.js application is typically done during development to bypass Cross-Origin Resource Sharing (CORS) restrictions. This is achieved using the devServer.proxy option in your vue.config.js file.
+Steps to set up a CORS proxy in Vue.js:
+Create vue.config.js: If you don't already have one, create a vue.config.js file in the root of your Vue project (at the same level as package.json).
+Configure the proxy: Add the devServer.proxy configuration within module.exports in vue.config.js.
+JavaScript
+
+    // vue.config.js
+    module.exports = {
+      devServer: {
+        proxy: {
+          // Proxy all requests starting with '/api' to your backend server
+          '^/api': {
+            target: 'http://localhost:3000', // Replace with your backend server URL
+            changeOrigin: true, // Needed for virtual hosted sites
+            // pathRewrite: { '^/api': '' } // Optional: Remove '/api' prefix from the request path sent to the backend
+          },
+          // You can add more proxy rules for different paths if needed
+          // '^/another-path': {
+          //   target: 'http://another-backend.com',
+          //   changeOrigin: true,
+          // },
+        },
+        // For simpler cases where you want to proxy all unknown requests to a single backend
+        // proxy: 'http://localhost:4000',
+      },
+    };

caddy-admin.json

@@ -0,0 +1,12 @@
+{
+  "admin": {
+    "listen": "localhost:2019",
+    "enforce_origin": true,
+    "origins": [
+      "*",
+      "http://localhost:2019",
+      "http://localhost:5173",
+      "http://*:*"
+    ]
+  }
+}

caddy-admin.sh

@@ -0,0 +1,12 @@
+{
+    admin: 2019 {
+        enforce_origin: "false"
+    }
+}
+
+Can run the following command to turn it off:
+
+
+curl -X PATCH http://localhost:2019/config/admin/enforce_origin -H "Content-Type: application/json"  -d 'false'
+
+

src/App.vue

@@ -1,5 +1,17 @@
 <template>
+  <div class="gradient-background">
     <RouterView />
+  </div>
 </template>
 
+<style scoped>
+  .gradient-background {
+    background-image: linear-gradient(to right, #ff7e5f, #feb47b);
+    /* You can adjust direction and colors as needed */
+    min-height: 100vh; /* Example: to fill the viewport height */
+    display: flex;
+    color: white;
+    }
+</style>
+
 <script></script>

src/main.js

@@ -11,4 +11,8 @@ const app = createApp(App)
 app.use(createPinia())
 app.use(router)
 
+app.config.errorHandler = (err) => {
+    console.log(err);
+}
+
 app.mount('#app')

src/router/index.js

@@ -9,11 +9,13 @@ const router = createRouter({
       name: 'home',
       component: HomeView,
     },
+    /*
     {
       path: '/config',
       name: 'Config',
       component: () => import('../views/ConfigView.vue')
     }
+    */
   ],
 })
 

src/views/ConfigView.vue

@@ -1,5 +0,0 @@
-<template>
-    <div class="container">
-        <button class="btn btn-primary">Get Config</button>
-    </div>
-</template>

src/views/HomeView.vue

@@ -1,5 +1,72 @@
 <template>
-  <div></div>
+    <div class="container">
+        <button class="btn btn-primary" @click="fetchData">Get Config</button>
+    <br/>
+
+    <p> {{ myData }}</p>
+
+    </div>
+
 </template>
 
-<script setup></script>
+<script>
+
+    export default {
+        data() {
+            return {
+                myData: null,
+                isLoading: false,
+                error: null
+            };
+        },
+        methods: {
+            async fetchData() {
+                this.isLoading = true;
+                this.error = null;
+            
+                let fetch_data = null;
+
+                fetch('http://localhost:2019/config/', {
+                        mode: 'cors',
+                        method: 'GET'
+                    })
+                //.then(response => console.log(response))
+                .then(response => response.json())
+                //then(responseJson => fetch_data = responseJson)
+                //.then(data => console.log(data))
+                .then(data => {
+                    fetch_data = data;
+                    this.myData = data;
+                })
+                .catch(error => {
+                        console.error('Error:', error);
+                        this.error = error;
+                    }
+                );
+
+                // Wait for the above fetch request to complete.  
+                // Keep waiting until fetch completes or there is an error
+                /*
+                var isCompleted = false;
+                do {
+                    await new Promise(r => setTimeout(r, 2000));
+                    if (fetch_data !== null || this.error !== null) {
+                        isCompleted = true;
+                    }
+                } while (isCompleted === false);
+                */
+
+                //const response = fetch('http://localhost:2019/config/');
+                //if (!response.ok){
+                //    throw new Error (`Http error! status: ${response.status}`);
+                //}
+
+                //const config = (await response).json();
+                //console.log('fetched caddy config!');
+
+
+            }
+        }
+    }
+
+</script>

src/views/HomeView.vue.bak

@@ -0,0 +1,5 @@
+<template>
+  <div></div>
+</template>
+
+<script></script>