From 0c01d11b4495f125ca6749206e0247c5d7e76cb9 Mon Sep 17 00:00:00 2001 From: Rishi Ghan Date: Thu, 25 Nov 2021 23:47:00 -0800 Subject: [PATCH] =?UTF-8?q?=F0=9F=94=A7=20Several=20CORS=20related=20fixes?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .gitignore | 3 +- docker-compose.yml | 4 +-- .../AirDCPPSettings/AirDCPPHubsForm.tsx | 32 +++++++++---------- .../AirDCPPSettings/AirDCPPSettingsForm.tsx | 21 ++++++------ src/client/components/Settings.tsx | 26 +++++++++++++-- src/server/index.ts | 28 ++++++++++------ 6 files changed, 74 insertions(+), 40 deletions(-) diff --git a/.gitignore b/.gitignore index 11149e5..bb39b3d 100644 --- a/.gitignore +++ b/.gitignore @@ -13,4 +13,5 @@ tests/**/*.jsx src/client/assets/scss/App.css.map yarn-error.log .nova -environment.list \ No newline at end of file +environment.list +.env diff --git a/docker-compose.yml b/docker-compose.yml index 0e95226..90f3201 100644 --- a/docker-compose.yml +++ b/docker-compose.yml @@ -12,7 +12,7 @@ services: - $COMICS_DIRECTORY:/comics - $USERDATA_DIRECTORY:/userdata ports: - - "8050:8050" + # - "8050:8050" - "3050:3050" links: - importapi @@ -175,7 +175,7 @@ services: ports: - 8050:80 environment: - - TARGET_DOMAIN=ghost + - TARGET_DOMAIN=0.0.0.0 # elasticsearch: # image: docker.elastic.co/elasticsearch/elasticsearch:7.10.0 diff --git a/src/client/components/AirDCPPSettings/AirDCPPHubsForm.tsx b/src/client/components/AirDCPPSettings/AirDCPPHubsForm.tsx index cfc239f..0f0a1e9 100644 --- a/src/client/components/AirDCPPSettings/AirDCPPHubsForm.tsx +++ b/src/client/components/AirDCPPSettings/AirDCPPHubsForm.tsx @@ -1,34 +1,34 @@ -import React, { ReactElement, useEffect, useState } from "react"; +import React, { ReactElement, useEffect, useState, useContext } from "react"; import { Form, Field } from "react-final-form"; -import axios from "axios"; import { useDispatch } from "react-redux"; -import { isEmpty, isUndefined } from "lodash"; +import { isEmpty, isNil, isUndefined } from "lodash"; import Select from "react-select"; import { saveSettings } from "../../actions/settings.actions"; -import { CORS_PROXY_SERVER_URI } from "../../constants/endpoints"; +import { AirDCPPSocketContext } from "../../context/AirDCPPSocket"; export const AirDCPPHubsForm = (airDCPPClientUserSettings): ReactElement => { const { settings } = airDCPPClientUserSettings; const dispatch = useDispatch(); const [hubList, setHubList] = useState([]); - + const { ADCPPSocket } = useContext(AirDCPPSocketContext); useEffect(() => { - if (!isEmpty(settings)) { - axios({ - 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}`, - }, - }).then((hubs) => { - const hubSelectionOptions = hubs.data.map(({ hub_url, identity }) => ({ + (async () => { + if (!isEmpty(settings)) { + console.log(ADCPPSocket); + await ADCPPSocket.connect( + settings.directConnect.client.host.username, + settings.directConnect.client.host.password, + true, + ); + const hubs = await ADCPPSocket.get(`hubs`); + const hubSelectionOptions = hubs.map(({ hub_url, identity }) => ({ value: hub_url, label: identity.name, })); setHubList(hubSelectionOptions); - }); - } + } + })(); }, []); const onSubmit = (values) => { diff --git a/src/client/components/AirDCPPSettings/AirDCPPSettingsForm.tsx b/src/client/components/AirDCPPSettings/AirDCPPSettingsForm.tsx index 22d8635..0d036aa 100644 --- a/src/client/components/AirDCPPSettings/AirDCPPSettingsForm.tsx +++ b/src/client/components/AirDCPPSettings/AirDCPPSettingsForm.tsx @@ -6,7 +6,7 @@ import { AirDCPPSettingsConfirmation } from "./AirDCPPSettingsConfirmation"; import axios from "axios"; import { AirDCPPSocketContext } from "../../context/AirDCPPSocket"; import AirDCPPSocket from "../../services/DcppSearchService"; -import { isUndefined, isEmpty } from "lodash"; +import { isUndefined, isEmpty, isNil } from "lodash"; import { CORS_PROXY_SERVER_URI } from "../../constants/endpoints"; export const AirDCPPSettingsForm = (airDCPPClientSettings): ReactElement => { @@ -16,19 +16,20 @@ export const AirDCPPSettingsForm = (airDCPPClientSettings): ReactElement => { const onSubmit = async (values) => { try { - const airDCPPResponse = await axios({ - url: `${CORS_PROXY_SERVER_URI}${values.protocol}://${values.hostname}/api/v1/sessions/authorize`, - method: "POST", - data: { - username: values.username, - password: values.password, - }, + const socket = new AirDCPPSocket({ + hostname: `${values.hostname}`, + protocol: `${values.protocol}`, }); - if (airDCPPResponse.status === 200) { + const socketConnectionResponse = await socket.connect( + values.username, + values.password, + true, + ); + if (!isNil(socketConnectionResponse.session_id)) { dispatch( saveSettings({ host: values, - airDCPPUserSettings: airDCPPResponse.data, + airDCPPUserSettings: socketConnectionResponse, }), ); setADCPPSocket( diff --git a/src/client/components/Settings.tsx b/src/client/components/Settings.tsx index 9c98025..e8bcecd 100644 --- a/src/client/components/Settings.tsx +++ b/src/client/components/Settings.tsx @@ -1,11 +1,19 @@ -import React, { useState, useEffect, useCallback, ReactElement } from "react"; +import React, { + useState, + useEffect, + useCallback, + ReactElement, + useContext, +} from "react"; import { AirDCPPSettingsForm } from "./AirDCPPSettings/AirDCPPSettingsForm"; import { AirDCPPHubsForm } from "./AirDCPPSettings/AirDCPPHubsForm"; import { SystemSettingsForm } from "./SystemSettings/SystemSettingsForm"; import settingsObject from "../constants/settings/settingsMenu.json"; -import { isEmpty, isUndefined, map } from "lodash"; +import { isEmpty, isNil, isUndefined, map } from "lodash"; import { useDispatch, useSelector } from "react-redux"; import { getSettings } from "../actions/settings.actions"; +import { AirDCPPSocketContext } from "../context/AirDCPPSocket"; +import AirDCPPSocket from "../services/DcppSearchService"; interface ISettingsProps {} @@ -15,10 +23,24 @@ export const Settings = (props: ISettingsProps): ReactElement => { (state: RootState) => state.settings.data, ); const dispatch = useDispatch(); + const { ADCPPSocket, setADCPPSocket } = useContext(AirDCPPSocketContext); useEffect(() => { dispatch(getSettings()); }, []); + + useEffect(() => { + if (!isEmpty(airDCPPClientSettings)) { + console.log(airDCPPClientSettings); + setADCPPSocket( + new AirDCPPSocket({ + hostname: `${airDCPPClientSettings.directConnect.client.host.hostname}`, + protocol: `${airDCPPClientSettings.directConnect.client.host.protocol}`, + }), + ); + } + }, [airDCPPClientSettings]); const [active, setActive] = useState("gen-db"); + const settingsContent = [ { id: "adc-hubs", diff --git a/src/server/index.ts b/src/server/index.ts index 4204ed7..857c154 100644 --- a/src/server/index.ts +++ b/src/server/index.ts @@ -6,22 +6,32 @@ import path from "path"; // call express const app: Express = express(); // define our app using express +const port: number = Number(process.env.PORT) || 8050; // set our port + +// Configure app to respond with these headers for CORS purposes +app.use(function (req, res, next) { + res.header("Access-Control-Allow-Origin", "*"); + res.header( + "Access-Control-Allow-Headers", + "Origin, X-Requested-With, Content-Type, Accept", + ); + next(); +}); + // configure app to use bodyParser for // Getting data from body of requests app.use(bodyParser.json()); app.use(bodyParser.urlencoded({ extended: true })); - -const port: number = Number(process.env.PORT) || 8050; // set our port - -app.get("/", (req: Request, res: Response) => { - console.log("sending index.html"); - res.sendFile(path.resolve(__dirname, "../dist/index.html")); -}); +// +// app.get("/", (req: Request, res: Response) => { +// console.log("sending index.html"); +// res.sendFile(path.resolve(__dirname, "../dist/index.html")); +// }); // REGISTER ROUTES // all of the routes will be prefixed with /api -const routes: Router[] = Object.values(router); -app.use("/api", routes); +// const routes: Router[] = Object.values(router); +// app.use("/api", routes); // Send index.html on root request app.use(express.static("dist"));