🔧 CORS proxy server

src/client/components/AirDCPPSettings/AirDCPPHubsForm.tsx

@@ -5,6 +5,7 @@ import { useDispatch } from "react-redux";
 import { isEmpty, isUndefined } from "lodash";
 import Select from "react-select";
 import { saveSettings } from "../../actions/settings.actions";
+import { CORS_PROXY_SERVER_URI } from "../../constants/endpoints";
 
 export const AirDCPPHubsForm = (airDCPPClientUserSettings): ReactElement => {
   const { settings } = airDCPPClientUserSettings;
@@ -14,7 +15,7 @@ export const AirDCPPHubsForm = (airDCPPClientUserSettings): ReactElement => {
   useEffect(() => {
     if (!isEmpty(settings)) {
       axios({
-        url: `${settings.directConnect.client.host.protocol}://${settings.directConnect.client.host.hostname}/api/v1/hubs`,
+        url: `${CORS_PROXY_SERVER_URI}${settings.directConnect.client.host.protocol}://${settings.directConnect.client.host.hostname}/api/v1/hubs`,
         method: "GET",
         headers: {
           Authorization: `${settings.directConnect.client.airDCPPUserSettings.auth_token}`,

src/client/components/AirDCPPSettings/AirDCPPSettingsForm.tsx

@@ -7,6 +7,7 @@ import axios from "axios";
 import { AirDCPPSocketContext } from "../../context/AirDCPPSocket";
 import AirDCPPSocket from "../../services/DcppSearchService";
 import { isUndefined, isEmpty } from "lodash";
+import { CORS_PROXY_SERVER_URI } from "../../constants/endpoints";
 
 export const AirDCPPSettingsForm = (airDCPPClientSettings): ReactElement => {
   const { settings } = airDCPPClientSettings;
@@ -16,7 +17,7 @@ export const AirDCPPSettingsForm = (airDCPPClientSettings): ReactElement => {
   const onSubmit = async (values) => {
     try {
       const airDCPPResponse = await axios({
-        url: `${values.protocol}://${values.hostname}/api/v1/sessions/authorize`,
+        url: `${CORS_PROXY_SERVER_URI}${values.protocol}://${values.hostname}/api/v1/sessions/authorize`,
         method: "POST",
         data: {
           username: values.username,

src/client/constants/endpoints.ts

@@ -9,6 +9,13 @@ export const hostURIBuilder = (options: Record<string, string>): string => {
   );
 };
 
+export const CORS_PROXY_SERVER_URI = hostURIBuilder({
+  protocol: "http",
+  host: process.env.UNDERLYING_HOSTNAME || "localhost",
+  port: "8050",
+  apiPath: "/",
+});
+
 export const COMICBOOKINFO_SERVICE_URI = hostURIBuilder({
   protocol: "http",
   host: process.env.UNDERLYING_HOSTNAME || "localhost",

src/server/index.ts

@@ -2,9 +2,11 @@ import express, { Request, Response, Router, Express } from "express";
 import bodyParser from "body-parser";
 import router from "./route";
 import path from "path";
+import cors_proxy from "cors-anywhere";
 
 // call express
 const app: Express = express(); // define our app using express
+const host = process.env.HOST || "0.0.0.0";
 
 // configure app to use bodyParser for
 // Getting data from body of requests
@@ -12,6 +14,7 @@ app.use(bodyParser.json());
 app.use(bodyParser.urlencoded({ extended: true }));
 
 const port: number = Number(process.env.PORT) || 8050; // set our port
+const proxyPort = 8050; // set our port
 
 app.get("/", (req: Request, res: Response) => {
   console.log("sending index.html");
@@ -27,6 +30,20 @@ app.use("/api", routes);
 app.use(express.static("dist"));
 app.use(express.static("public"));
 
-app.listen(port);
+// app.listen(port);
+// console.log(`Server is listening on ${port}`);
 
-console.log(`Server is listening on ${port}`);
+cors_proxy
+  .createServer({
+    originWhitelist: [], // Allow all origins
+    requireHeader: ["origin", "x-requested-with"],
+    removeHeaders: ["cookie", "cookie2"],
+  })
+  .listen(port, host, function () {
+    console.log(
+      "ThreeTwo! Express server with CORS Anywhere running on " +
+        host +
+        ":" +
+        proxyPort,
+    );
+  });