Added forwarder binding to Service.vue

src/App.vue

@@ -84,6 +84,7 @@
                 :key="index"
                 :item="item"
                 :proxy="config.proxy"
+                :forwarder="config.forwarder"
                 :class="['column', `is-${12 / config.columns}`]"
               />
             </template>
@@ -113,6 +114,7 @@
                 :key="index"
                 :item="item"
                 :proxy="config.proxy"
+                :forwarder="config.forwarder"
               />
             </div>
           </div>

src/assets/defaults.yml

@@ -53,3 +53,4 @@ services: []
 
 
 proxy: ~
+forwarder: ~

src/components/Service.vue

@@ -1,5 +1,10 @@
 <template>
-  <component v-bind:is="component" :item="item" :proxy="proxy"></component>
+  <component
+    v-bind:is="component"
+    :item="item"
+    :proxy="proxy"
+    :forwarder="forwarder"
+  ></component>
 </template>
 
 <script>
@@ -10,6 +15,7 @@ export default {
   props: {
     item: Object,
     proxy: Object,
+    forwarder: Object,
   },
   computed: {
     component() {

src/mixins/service.js

@@ -1,6 +1,9 @@
+const merge = require("lodash.merge");
+
 export default {
   props: {
     proxy: Object,
+    forwarder: Object,
   },
   created: function () {
     // custom service often consume info from an API using the item link (url) as a base url,
@@ -25,18 +28,28 @@ export default {
           this.item.useCredentials === true ? "include" : "omit";
       }
 
-      options = Object.assign(options, init);
+      if (this.forwarder?.apikey) {
+        options.headers = {
+          "X-Homer-Forwarder-Api-Key": this.forwarder.apikey,
+        };
+      }
 
       if (path.startsWith("/")) {
         path = path.slice(1);
       }
 
-      let url = this.endpoint;
+      let url = path ? `${this.endpoint}/${path}` : this.endpoint;
 
-      if (path) {
-        url = `${this.endpoint}/${path}`;
+      if (this.forwarder?.url) {
+        options.headers = {
+          ...(options.headers || {}),
+          "X-Homer-Forwarder-Url": url,
+        };
+        url = this.forwarder.url;
       }
 
+      options = merge(options, init);
+
       return fetch(url, options).then((response) => {
         if (!response.ok) {
           throw new Error("Not 2xx response");