Servieren von React -Anwendung in der Hoffnung über Server und Verwendung von IFrame ⇐ JavaScript

[Anonymous]

Ich habe ein Szenario, in dem ich zwei React -Anwendungen habe. Application-1 öffnet Application-2 Verwenden eines Iframe. Wenn ich jedoch den Application-1-Iframe verwende, muss es mehrere Serverhopfen durchlaufen, um die Anwendung-2 zu erreichen, so etwas wie folgt. < /P>

Code: Select all

Application-1

----> Express-server-1 (Servieranwendungsantrag & Weiterleitungsanforderung für Anwendung-2) ----> < Strong> Express-Server-2 (Proxy/Passthrough) ------> Express-server-3 (Servieranwendung- 2) ------> Anwendung-2
Während ich auf Application-2 direkt zugreifen kann, kann ich mithilfe eines Iframe nicht auf Application-1 zugreifen. Code> Datei, die die Anwendung-2 bedient und auf Server-3 ausgeführt wird.

Code: Select all

const createError = require("http-errors");
const express = require("express");
const cors = require('cors')
const path = require("path");
const fs = require("fs");
const cookieParser = require("cookie-parser");

// Server-static middleware
const {
appLogger,
expressLogger,
expressErrorLogger,
} = require("./lib/logger");

const {corsOptionsDelegate} = require("./routes/corsDelegate");
const app = express();

app.disable("x-powered-by");
app.options('*', cors());
// serves static pages
app.use("/application-2/static", express.static(path.join(__dirname, "public")));

// view engine setup
app.set("views", path.join(__dirname, "views"));
app.set("view engine", "jade");

app.use(express.json());
app.use(express.urlencoded({extended: false}));
app.use(expressLogger);
app.use(expressErrorLogger);
app.use(cookieParser());

app.use(
express.static(path.join(__dirname, ".", "webapp")),
(req, res, next) => {
try {
decodeURIComponent(req.url);
return next();
} catch (err) {
return res.status(400).json({message: "Invalid request"});
}
}
);

const managementRouter = require("./routes/management");
app.use("/application-2/management", managementRouter);

// serves the application-2 app
app.use("/application-2", express.static(path.join(__dirname, ".", "webapp")));

// connect to the "src/routes" directory
const routersPath = path.join(__dirname, "routes/v1");
// read all files in the "/src/routers" directory
fs.readdirSync(routersPath).forEach((file) => {
if (file.endsWith(".js")) {
// dynamically import the router module
const routerModule = require((path.join(routersPath, file).replace(".js","")));
// register the router
app.use(routerModule);
}
});

app.get("/application-2/unauthorized", cors(corsOptionsDelegate), function (req, res, next) {
res.status(403);
res.sendFile(path.resolve(__dirname, ".", "views", "unauthorized.html"));
});

// catch 404 and forward to error handler
app.use(function (req, res, next) { // ERROR is happening here line 104
next(createError(404));
});

// error handling
app.use(function (err, req, res, next) {
// set locals, only providing error in development
res.locals.message = err.message;
res.locals.error = req.app.get("env") === "development" ? err : {};

// render the error page
res.status(err.status || 500);
res.render("error", {title: "ABC Images | application Search"});
});

module.exports = app;

Unten finden Code>. < /p>

Code: Select all

app.use("/application-search", createProxyMiddleware({
target: "http://localhost:9012",
changeOrigin: true,
logLevel: 'debug',
pathRewrite: (path, req) => {
// Extract the query string from the original URL
const queryString = req.url.split('?')[1] || "11x";
// Rewrite the path to include the query string
return `/?${queryString}`;
},
onProxyReq: (proxyReq, req, res) => {
let cookieArray = [];
try {
// Split the cookies into an array and log them
const cookies = req.headers.cookie || "";
cookieArray = cookies.split(';').map(row => {
return row.trim();
});
} catch (error) {
console.error('Error processing cookies:', error);
}
//const tokenCookie = cookieArray.find(row => row.startsWith('ckns_pp_id=')) || "";
const tokenValue = tokenCookie.split('=')[1].trim();

// Add custom headers if needed
proxyReq.setHeader('Authorization', `Bearer ${tokenValue}`);
}

}));

unten ist Code unter Server-2 , bei dem die Anforderung von Server-1 auf den Server-3 klettern, der Application-2
serviert

Code: Select all

app.use("/", createProxyMiddleware({
target: "https://xxx.co.uk/application-2",
changeOrigin: true,
logLevel: 'debug',
pathRewrite: (path, req) => {
// Extract the query string from the original URL
const queryString = req.url.split('?')[1] || "11x";
// Rewrite the path to include the query string
return `/?${queryString}`;
},
onProxyReq: (proxyReq, req, res) => {
// Add the authorization header
const bearerToken = req.headers['authorization'] || "";
proxyReq.setHeader('Authorization', bearerToken);
},
onProxyRes: (proxyRes, req, res) => {
console.log(`⬅️ Response from Server-3: ${proxyRes.statusCode} for ${req.url}`);
}
}));
< /code>
Ich bekomme entweder 404 nicht gefunden.404
NotFoundError: Not Found
at /Users/abc01/projects/application-2/server/app.js:104:10

Derzeit verwende ich createReProxymiddleware Strategie zur Weitergabe der Anfrage. Bitte geben Sie mit, ob es eine bessere Strategie für diese Anforderungen gibt, da ich durch die Server wie dort hüpfen muss sind einige Authentifizierungsanforderungen und können nicht direkt auf die Anwendung-2 zugreifen.