Allow proxy config for message

src/components/Message.vue

@@ -15,10 +15,14 @@
 </template>
 
 <script>
+import fetchOptions from "@/mixins/fetchOptions.js";
+
 export default {
   name: "Message",
+  mixins: [fetchOptions],
   props: {
     item: Object,
+    proxy: Object,
   },
   data: function () {
     return {
@@ -67,14 +71,15 @@ export default {
     },
 
     downloadMessage: function (url) {
-      return fetch(url, { headers: { Accept: "application/json" } }).then(
-        function (response) {
-          if (response.status != 200) {
-            return;
-          }
-          return response.json();
-        },
-      );
+      const defaultHeaders = this.item?.headers || { Accept: "application/json" };
+      const options = this.buildFetchOptions(defaultHeaders);
+
+      return fetch(url, options).then((response) => {
+        if (response.status !== 200) {
+          return;
+        }
+        return response.json();
+      });
     },
 
     mapRemoteMessage: function (message) {

src/mixins/fetchOptions.js

@@ -0,0 +1,29 @@
+export default {
+  props: {
+    proxy: Object,
+  },
+  methods: {
+    buildFetchOptions(init = {}, options = {}) {
+      if (this.proxy?.useCredentials) {
+        options.credentials = "include";
+      }
+
+      if (this.proxy?.headers && !!this.proxy.headers) {
+        options.headers = this.proxy.headers;
+      }
+
+      // Each item can override the credential settings
+      if (this.item.useCredentials !== undefined) {
+        options.credentials =
+          this.item.useCredentials === true ? "include" : "omit";
+      }
+
+      // Each item can have their own headers
+      if (this.item?.headers && !!this.item.headers) {
+        options.headers = this.item.headers;
+      }
+
+      return Object.assign(options, init);
+    },
+  },
+};

src/mixins/service.js

@@ -1,4 +1,7 @@
+import fetchOptions from "@/mixins/fetchOptions.js";
+
 export default {
+  mixins: [fetchOptions],
   props: {
     proxy: Object,
   },
@@ -13,29 +16,6 @@ export default {
   },
   methods: {
     fetch: function (path, init, json = true) {
-      let options = {};
-
-      if (this.proxy?.useCredentials) {
-        options.credentials = "include";
-      }
-
-      if (this.proxy?.headers && !!this.proxy.headers) {
-        options.headers = this.proxy.headers;
-      }
-
-      // Each item can override the credential settings
-      if (this.item.useCredentials !== undefined) {
-        options.credentials =
-          this.item.useCredentials === true ? "include" : "omit";
-      }
-
-      // Each item can have their own headers
-      if (this.item.headers !== undefined && !!this.item.headers) {
-        options.headers = this.item.headers;
-      }
-
-      options = Object.assign(options, init);
-
       if (path.startsWith("/")) {
         path = path.slice(1);
       }
@@ -46,6 +26,8 @@ export default {
         url = `${this.endpoint}/${path}`;
       }
 
+      const options = this.buildFetchOptions(init);
+
       return fetch(url, options).then((response) => {
         let success = response.ok;
         if (Array.isArray(this.item.successCodes)) {