Fix CORS and mixed content issue

nuxt.config.js

@@ -27,6 +27,9 @@ export default {
   server: {
     host: '0.0.0.0', // default: localhost
   },
+  serverMiddleware: [
+    '~/proxy/index.js'
+  ],
   head: {
     title: `${meta.name} \u2022 ${meta.shortDescription}`,
     meta: [

pages/index.vue

@@ -700,6 +700,28 @@
           behavior: 'smooth'
         });
       },
+      async makeRequest(auth, headers, requestBody) {
+        const config = this.$store.state.postwoman.settings.PROXY_ENABLED ? {
+            method: 'POST',
+            url: '/proxy',
+            data: {
+              method: this.method,
+              url: this.url + this.pathName + this.queryString,
+              auth,
+              headers,
+              data: requestBody ? requestBody.toString() : null
+            }
+          } : {
+            method: this.method,
+            url: this.url + this.pathName + this.queryString,
+            auth,
+            headers,
+            data: requestBody ? requestBody.toString() : null
+          };
+
+        const response = await this.$axios(config);
+        return this.$store.state.postwoman.settings.PROXY_ENABLED ? response.data : response;
+      },
       async sendRequest() {
         if (!this.isValidURL) {
           this.$toast.error('URL is not formatted properly', {
@@ -768,13 +790,8 @@
 
         try {
           const startTime = Date.now();
-          const payload = await this.$axios({
-            method: this.method,
-            url: this.url + this.pathName + this.queryString,
-            auth,
-            headers,
-            data: requestBody ? requestBody.toString() : null
-          });
+
+          const payload = await this.makeRequest(auth, headers, requestBody);
 
           const duration = Date.now() - startTime;
           this.$toast.info(`Finished in ${duration}ms`, {
@@ -821,13 +838,24 @@
             };
             this.$refs.historyComponent.addEntry(entry);
             return;
+          } else {
+            this.response.status = error.message;
+            this.response.body = "See JavaScript console (F12) for details.";
+            this.$toast.error('Something went wrong!', {
+              icon: 'error'
+            });
+            if(!this.$store.state.postwoman.settings.PROXY_ENABLED) {
+              this.$toast.info('Turn on the proxy', {
+                dontClose : true,
+                action: {
+                  text: 'Go to settings',
+                  onClick : (e, toastObject) => {
+                    this.$router.push({ path: '/settings' });
+                  }
+                }
+              });
+            }
           }
-
-          this.response.status = error.message;
-          this.response.body = "See JavaScript console (F12) for details.";
-          this.$toast.error('Something went wrong!', {
-            icon: 'error'
-          });
         }
       },
       getQueryStringFromPath() {

pages/settings.vue

@@ -32,12 +32,6 @@
         </li>
       </ul>
     </pw-section>
-
-    <!--
-		PROXY SETTINGS
-		--------------
-		This feature is currently not finished.
-
 		<pw-section class="blue" label="Proxy">
 			<ul>
 				<li>
@@ -46,7 +40,10 @@
 					</pw-toggle>
 				</li>
 			</ul>
-
+      <!--
+      PROXY SETTINGS URL AND KEY
+      --------------
+		  This feature is currently not finished.
 			<ul>
 				<li>
 					<label for="url">URL</label>
@@ -57,8 +54,9 @@
 					<input id="key" type="password" v-model="settings.PROXY_KEY" :disabled="!settings.PROXY_ENABLED" @change="applySetting('PROXY_KEY', $event)">
 				</li>
 			</ul>
+      -->
 		</pw-section>
-		-->
+
   </div>
 </template>
 <script>

proxy/index.js

@@ -0,0 +1,50 @@
+import express from 'express';
+import bodyParser from 'body-parser';
+import axios from 'axios';
+
+const app = express();
+
+app.use(bodyParser.json());
+
+app.use((req, res, next) => {
+  res.header('Access-Control-Allow-Origin', '*');
+  next();
+});
+
+app.post('/', async function(req, res) {
+  const {method, url, auth, headers, data} = req.body;
+  try {
+    const payload = await axios({
+      method,
+      url,
+      auth,
+      headers,
+      data
+    })
+
+    return res.json({
+        data: payload.data,
+        status: payload.status,
+        statusText: payload.statusText,
+        headers: payload.headers,
+    });
+
+  } catch(error) {
+    if(error.response) {
+      const errorResponse = error.response;
+      return res.json({
+        data: errorResponse.data,
+        status: errorResponse.status,
+        statusText: errorResponse.statusText,
+        headers: errorResponse.headers,
+      });
+    } else {
+      return res.status(500).send();
+    }
+  }
+});
+
+export default {
+  path: '/proxy',
+  handler: app
+}