use the vue proxy to avoid cors issues

codesiddhant · Nov 19, 2019 · 42744f7 · 42744f7
1 parent fff736c
commit 42744f7
Show file tree

Hide file tree

Showing 3 changed files with 34 additions and 17 deletions.
diff --git a/src/App.vue b/src/App.vue
@@ -42,22 +42,18 @@
             </div>
 
             <div class="field">
-                <label for="nla">Use NLA (Windows RDP)</label>
-                <span>
-              <input type="checkbox" v-model="nla" id="nla">
-            </span>
+                <label for="nla">Security</label>
+                <input type="text" v-model="security" id="nla" placeholder="type nla here for Network Level Authentication">
             </div>
 
             <div class="field">
-                <label for="forcehttp">Force HTTP Tunnel</label>
-                <span>
-              <input type="checkbox" v-model="forceHttp" id="forcehttp">
-            </span>
+                <label>Query string</label>
+                <span class="pl-1">{{scrubbedQuery}}</span>
             </div>
 
             <div class="field">
-                <label>Query string</label>
-                <span class="pl-1">{{scrubbedQuery}}</span>
+                <label for="forcehttp">Force HTTP Tunnel</label>
+                <span><input type="checkbox" v-model="forceHttp" id="forcehttp"></span>
             </div>
 
             <div class="center">
@@ -86,7 +82,7 @@
         user: '',
         pass: '',
         ignoreCert: true,
-        nla: false,
+        security: '',
         forceHttp: false,
       }
     },
@@ -97,7 +93,7 @@
           hostname: this.hostname,
           port: this.port,
           'ignore-cert': this.ignoreCert,
-          nla: this.nla,
+          security: this.security,
           username: this.user,
           password: this.pass
         }
@@ -152,8 +148,8 @@
     }
 
     .container {
-      width: 100%;
-      height: 100%;
+        width: 100%;
+        height: 100%;
     }
 
     #app {
@@ -166,7 +162,7 @@
     }
 
     h1 {
-      text-align: center;
+        text-align: center;
     }
 
     .field {
@@ -187,6 +183,9 @@
         margin-left: 1rem;
         margin-right: 1rem;
         font-size: 16pt;
+        border: 1px solid black;
+        border-radius: 2px;
+        padding-left: 0.5rem;
     }
 
     .center {

diff --git a/src/components/GuacClient.vue b/src/components/GuacClient.vue
@@ -15,8 +15,8 @@
 
   Guacamole.Mouse = GuacMouse.mouse
 
-  const wsUrl = 'ws://127.0.0.1:4567/websocket-tunnel'
-  const httpUrl = 'http://127.0.0.1:4567/tunnel'
+  const wsUrl = `ws://${location.host}/websocket-tunnel`
+  const httpUrl = `http://${location.host}/tunnel`
 
   export default {
     components: {

diff --git a/vue.config.js b/vue.config.js
@@ -0,0 +1,18 @@
+const guacClient = 'http://127.0.0.1:4567'
+
+module.exports = {
+  devServer: {
+    proxy: {
+      '/tunnel': {
+        target: guacClient,
+        changeOrigin: true,
+        ws: false
+      },
+      '/websocket-tunnel': {
+        target: guacClient,
+        changeOrigin: true,
+        ws: true
+      }
+    }
+  }
+}