Servieren von React -Anwendung in der Hoffnung über Server und Verwendung von IFrame
Posted: 21 Feb 2025, 22:19
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>
----> 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.
Unten finden Code>. < /p>
unten ist Code unter Server-2 , bei dem die Anforderung von Server-1 auf den Server-3 klettern, der Application-2
serviert
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.
Code: Select all
Application-1
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;
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}`);
}
}));
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